学webpack 3，看这篇文就够了

2017-08-03 本文已影响184人月光在心中

此文档使用webpack版本为 3.4.1，在你自行测试中，可能输出结果与文档中所贴出内容不一致，请以你自己的代码为准

安装

本地安装

npm install --save-dev webpack 或 npm install --save-dev webpack@[version]

全局安装

npm install -g webpack

不推荐使用全局方式安装，将会影响项目中所使用的webpack版本

起步

使用CLI（命令行）

创建一个目录，并初始化package.json

mkdir webpack-test && cd webpack-test
npm init
npm install --save-dev webpack

webpack-test
    -- /dist
        -- index.html
    -- package.json
    -- /src
        -- index.js

编辑index.js文件

function fun(){
    document.write("Hello Webpack");
}
fun();

编辑index.html文件

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
    </head>
    <body>
    
    </body>
    <script src='bundle.js' charset='utf-8'></script>
</html>

在终端（工作目录为当前项目目录），输入webpack src/index.js dist/bundle.js，并回车。

在你的终端应该会出现以下类似内容：（内容也许会有差异）

λ webpack src/index.js dist/bundle.js
Hash: 0f97cc36123f295c9fd2
Version: webpack 3.4.1
Time: 260ms
    Asset     Size  Chunks             Chunk Names
bundle.js  36.9 kB       0  [emitted]  main
   [0] ./src/index.js 84 bytes {0} [built]
   [1] multi ./src/index.js ./src/index.js ./dist/bundle.js 52 bytes {0} [built]
   [2] ./src/index.css 1.08 kB {0} [built]
   [3] ./node_modules/_css-loader@0.28.4@css-loader!./src/index.css 237 bytes {0} [built]
   [7] ./dist/bundle.js 18.4 kB {0} [built]
    + 3 hidden modules

运行index.html，可以看到页面中的Hello Webpack。

使用配置文件

创建webpack.config.js文件

module.exports = {
    entry : "./src/index.js",
    output : {
        filename : "bundle.js",
        path : __dirname+"/dist"
    }
};

在终端输入webpack --config webpack.config.js 或者直接输入webpack，并回车

 webpack --config webpack.config.js
Hash: e2e4b7042538facd73f0
Version: webpack 3.4.1
Time: 216ms
    Asset     Size  Chunks             Chunk Names
bundle.js  18.4 kB       0  [emitted]  main
   [0] ./src/index.js 84 bytes {0} [built]
   [1] ./src/index.css 1.08 kB {0} [built]
   [2] ./node_modules/_css-loader@0.28.4@css-loader!./src/index.css 237 bytes {0} [built]
    + 3 hidden modules

使用npm

修改package.json文件中

{
...
"scripts": {
    "build": "webpack"
 },
...
}

在终端运行npm run build

使用source map

跟踪代码错误

修改webpack.config.js

//...省略
module.exports = {
    devtool : "inline-source-map",
    //...省略
}

修改index.js文件，故意生成一个错误

import "./index.css";
import wicon from "./webpack.png";
function fun(){
    console.log(a);
   //...省略
}

重新构建，刷新页面，在控制台可以看到如下错误

Uncaught ReferenceError: a is not defined
    at fun (index.js:4)
    at Object.<anonymous> (index.js:10)
    at __webpack_require__ (bootstrap 403852e…:19)
    at module.exports (bootstrap 403852e…:62)
    at bootstrap 403852e…:62

可以看到，错误信息及错误所在文件和行数

开发模式

观察模式

在终端输入 webpack -w 或 webpack --watch

会发现执行构建后，并没有退出命令，此时正处理观察模式

可以在package.json的scripts配置项中增加如下内容
```
"scripts": {
    "watch" : "webpack --watch"
  },
```
终端运行npm run watch 也能得到相同的效果
webpack-dev-server 即时刷新

安装

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

修改webpack.config.js
```
devServer : {
  contentBase : "./dist"
}
```
在终端输入 webpack-dev-server 或在package.json的scripts配置项中增加如下内容并使用npm run dev：
```
"scripts": {
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --open"
  },
```
会发现会自动打开浏览器，当有任意一个源文件被修改时，会自动重新刷新页面

**热加载模式 **

修改webpack.config.js
```
const webpack = require("webpack");
//...省略
plugins : [
  new webpack.HotModuleReplacementPlugin()
],
  //...省略
```
修改package.json的scripts配置项
```
"scripts": {
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --open --hot"
  }
```
即可开启hmr模式。即允许在运行时更新各模块，而无需进行完全刷新

loader

CSS

style-loader css-loader

css-loader用于将css文件做为模块处理，可以使用import 导入

style-loader 将所有处理完成的样式插入到页面的head中

安装

npm install --save-dev style-loader css-loader

修改webpack.config.js

const path = require("path");
module.exports = {
    entry : "./src/index.js",
    output : {
        filename : "bundle.js",
        path : path.resolve(__dirname,"dist")
    },
    module : {
        rules : [{
            test : /\.css$/,
            use : ["style-loader","css-loader"]
        }]
    }
};

在src目录下建立index.css文件

body{
    font-size : 50px;
    color : red;
}

修改index.js文件

import "./index.css";
//...省略

在终端执行npm run build，刷新页面

less | sass

less-loader sass-loader

npm install --save-dev less less-loader

图片

file-loader

安装

npm install --save-dev file-loader

修改webpack.config.js文件

//...省略
module : {
  rules : [{
    test : /\.css$/,
    use : ["style-loader","css-loader"]
  },{
    test : /\.(png|jpg|gif|jpeg)$/,
    use : ["file-loader"]
  }]
}
//...省略

修改index.css文件

.box{
    width: 497px;
    height:270px;
    background: url(./webpack.png)
}

修改index.html文件

<body>
   <div class="box"></div>
</body>

找一张你喜爱的照片拷贝至src目录下，终端运行npm run build，刷新页面

继续

修改index.js文件

import "./index.css";
import wicon from "./webpack.png";
function fun(){
    document.write("Hello Webpack");
    let img = new Image();
    img.src = wicon;
    document.body.appendChild(img);
}
fun();

重新执行构建，刷新页面，你可以看到两张图片

JSON数据

JSON数据的加载是内置的，可以通过 import mdata from './data.json', 即可正常使用

ES6 | JSX

babel-loader

安装由于babel是几个模块包，对于解析不同的语言需要安装不同的包

常用的有如下：

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

babel-core babel的核心包
babel-loader bable的Loader
babel-preset-es2015 转换ES代码
babel-preset-react 转换JSX代码

在src目录新增other.js

export default function say(){
    console.log("hello!!!");
}

修改index.js

import say from "./other.js";
function fun(){
    say();
   //...省略
}

修改webpack.config.js

modules : {
  //...省略
  rules : [
    //...省略
    {
    test : /\.js$/,
      use : [{
        loader : "babel-loader",
        options : {
          presets : ["es2015"]
        }
      }]
  }]
}
//...省略

重新构建，观察控制台

多文件入口

在src目录增加home.js

function fun(){
    console.log("home is output");
}
fun();

修改index.html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="box"></div>
    </body>
    <script src='./app.bundle.js' charset='utf-8'></script>
    <script src='./home.bundle.js' charset='utf-8'></script>
</html>

修改webpack.config.js

//...省略
entry: {
  app : "./src/index.js",
  home : "./src/home.js"
},
  output: {
    filename: "[name].bundle.js",
      path: __dirname + "/dist"
  },
//...省略

重新执行构建，并刷新页面，观察控制台

问题：如果修改webpack.config.js中第7行filename一行所输出的文件名称，重新构建，会发现在dist目录会新增新名称的文件，但index.html文件中依然引用的是旧的名字，如何解决？（参见插件 htmlwebpackplugin）

插件

HtmlWebpackPlugin

自动生成页面

安装

npm install --save-dev html-webpack-plugin

修改webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        //...省略
    },
    output: {
        //...省略
    },
    plugins : [
        new HtmlWebpackPlugin()
    ],
    module: {
        //...省略
    }
};

重新执行构建，并刷新页面。

观察dist目录下的index.html，发现在测试file-loader时，创建div不见了，上述插件为我们创建一个新的html文件，并自动将output项所指定的filename引入到了页面中

clean-webpack-plugin

清理dist目录

安装

npm install --save-dev clean-webpack-plugin --save-dev

修改webpack.config.js

const CleanWebpackPlugin = require("clean-webpack-plugin");
//...省略
plugins : [
  new HtmlWebpackPlugin(),
  new CleanWebpackPlugin(["dist"])
],
//...省略

重新执行构建，dist目录清静了

学webpack 3，看这篇文就够了

安装

本地安装

全局安装

起步

使用CLI（命令行）

使用配置文件

使用npm

使用source map

开发模式

loader

CSS

less | sass

图片

JSON数据

ES6 | JSX

多文件入口

插件

HtmlWebpackPlugin

clean-webpack-plugin

猜你喜欢

热点阅读