webpack的配置

gself 发布于2019-08-20 18:19 / 1113人阅读

摘要：的配置最近一直在用，接下来我们就用启动一下首先我们要安装，然后在使用接下来的配置先在项目下生成一个的文件自动生成的的文件接下来在装最好把全局的也都装上然后再把本地的装上如果安装的慢可以用安装，前提是要先安装接下来我们就用安装中的

webpack的配置

最近一直在用react，接下来我们就用webpack启动一下react

首先我们要安装node.js，然后在使用接下来的配置

先在项目下生成一个package.json的文件

npm init -y

自动生成的package.json的文件

{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

接下来在装webpack

npm install webpack -gd //最好把全局的也都装上
npm install webpack --save-dev //然后再把本地的装上

如果npm安装的慢可以用cnpm安装，前提是要先安装cnpm

npm install cnpm -gd

接下来我们就用cnpm安装bable中的插件

cnpm install --save-dev babel-loader babel-core

装转移的插件

npm install babel-preset-env  babel-preset-react --save-dev

接下来我们做一下小实验

编写代码

app.js

import bar from "./bar";

bar();

bar.js

export default function bar() {
  console.log(1);
}

使用 webpack 打包

webpack.config.js

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }
}

page.html

然后在命令行运行 webpack 就会创建 bundle.js.
也会在控制台打印出来1

接下来我们继续安装，然后在做一个小例子

安装 react相关库

npm install react react-dom --save

webpack-dev-server

npm install  webpack-dev-server -gd
npm install  webpack-dev-server --save-dev

运行  webpack-dev-server --content-base build/

自动刷新(automatic refresh)

webpack-dev-server --content-base build/  --inline

热更新 (hot replacement)

cnpm install react-hot-loader  --save-dev


webpack-dev-server --content-base build/  --hot

处理样式

cnpm install style-loader css-loader  --save-dev

都安装完了，接下来我们就看看代码吧

app.js

import React from "react";
import ReactDOM from "react-dom";
import HelloWorld from "./HelloWorld";
import "./main.css";
ReactDOM.render(,document.getElementById("app"));

HelloWorld.js

import React from "react";
class HelloWorld extends React.Component{
  render(){
    return (
      Hello World!!!!
    );
  }
}

//export {HelloWorld as default};
export default HelloWorld;

webpack.config.js

var path = require("path");
module.exports = {
    devtool:"source-map",
  entry: "./app.js",
  output: {
      path:path.resolve(__dirname,"build"),
      publicPath:"/assets/",
    filename: "bundle.js"
  },
  module: {
  rules: [
    { test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
    { test: /.css$/, exclude: /node_modules/, loader: "style-loader!css-loader!babel-loader" }
  ]
 }
}

index.html

package.json

{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --content-base build/  --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.0",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

main.css

body{
    background: red;
}

欢迎来扫，加下小组讨论

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84358.html

TCM的webpack配置与常用插件

摘要：中的配置热加载插件安装中的配置优化插件为组件分配，通过这个插件可以分析和优先考虑使用最多的模块，并为它们分配最小的压缩代码分离和文件 0 前言本文是针对TCM项目所做的WebPack配置文件总结，主要概述了一些常用配置选项和插件使用，对以后的项目有指导意义。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

罗志环 2019-08-20 14:36 评论0 收藏0
TCM的webpack配置与常用插件

摘要：中的配置热加载插件安装中的配置优化插件为组件分配，通过这个插件可以分析和优先考虑使用最多的模块，并为它们分配最小的压缩代码分离和文件 0 前言本文是针对TCM项目所做的WebPack配置文件总结，主要概述了一些常用配置选项和插件使用，对以后的项目有指导意义。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

张宪坤 2019-08-01 16:23 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换文件优化代码分割模块合并 ...

SunZhaopeng 2019-05-23 17:29 评论0 收藏0
Webpack入门到精通（1）

前言什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有哪些功能(代码转换文件优化代码分割模块合并自...

wangbinke 2019-08-26 13:52 评论0 收藏0
基于webpack构建的angular 1.x 工程（一）webpack篇

摘要：基于构建的工程一篇现在都已经出到的版本了，可我对它的认识还是停留在的版本。然后是写启动的命令行，也就是上面的这样写的意思是，当你输入你的命令名字就会让执行你对应命令的语句。我们首先把基本的配置引进来。基于webpack构建的angular 1.x 工程（一）webpack篇现在AngularJS都已经出到4.x的版本了，可我对它的认识还是停留在1.x的版本。之前用它是为...

Anleb 2019-08-21 17:23 评论0 收藏0