Webpack简单学习

参考 中文文档学习

核心概念：

• 入口(entry)

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

• 输出(output)

告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，

• loader

去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，

• 插件(plugins)

被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

// entry
module.exports = {
  entry: './path/to/my/entry/file.js'
};
// output
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

// loader
const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

使用

webpack默认可以处理js、json文件，生产环境比开发环境多了压缩代码和代码混淆

webpack ./src/index.js -o ./dist/bundle.js --mode=development // production
// 命令    入口文件   指定输出文件  输出目录   打包模式(开发者模式)(有注释，生产无)

webpack.config.js

let path = require('path');
console.log(path.resolve(__dirname, 'dist'));

module.exports = {
  // 入口文件
  entry: "./src/index.js",
  output: {
    // 输出文件名
    filename: "bundle.js",
    // 输出的路径
    // 绝对路径
    path: path.resolve(__dirname, 'dist')
  },
  // 打包模式
  mode: 'production',
}

然后在项目直接使用webpack即和上面命令一样

load 打包css等资源

由于webpack默认是不支持css等文件的，所以需要使用load模块.

// loader的配置 可能要处理多种文件 使用数组
module: {
  // 对某个格式下的文件进行转换处理
  rules: [{
    test: /\.css$/,    // 正则匹配需要处理的文件格式
    use: [
      // 将js的样式插入到style标签中 // 有顺序 是从下到上 逆序执行
      "style-loader",
      // 将css转换为js
      "css-loader"
    ]
  }]
}

同时需要npm i导入的相关模块，编写好webpack.json.js后webpack即可。

plugins

// 需要安装依赖 html-webpack-plugin   cnpm install html-webpack-plugin --save-dev
let HtmlWebpackPlugin = require("html-webpack-plugin");

// plugins插件配置 可能有多个插件 使用数组
plugins: [
  new HtmlWebpackPlugin({
    template: "./src/index.html"
  })
]

也需要导入相关依赖，在进行webpack结果一致。

打包图片资源

cnpm install html-loader url-loader --save-dev // 安装所需依赖

配置load中的rules

{
  test: /\.(img|jpg|svg|gif)$/i, // 匹配图片格式
    loader: "url-loader",
    // 图片小于8kb，base64处理，减少请求数量，会使得体积变大
    options: {
    limit: 8 * 1024,
      esModule: false,
      // [hash:10]取名为图片hash的前十位
      // [ext]取图片的拓展名
      name: "[hash:10].[ext]"
  }
}, {
  test: /\.html$/,  // 配置html
    loader: "html-loader"
}

模块热更换

安装依赖，可以全局安装。

cnpm install webpack-dev-server -g

// 模块热更新
devServer: {
  // 项目构建路径
  // contentBase: path.resolve(__dirname, "dist"),  // v3写法
  // 启动gzip压缩
  compress: true,
    // 设置端口号
    port: 3000,
    // 自动打开浏览器
    open: true,
    static: [{
    // 项目构建路径
    directory: path.join(__dirname, "dist"), // v4写法
    publicPath: "/serve-public-path-url",
  }, ],
    }

安装好依赖后，配置好文件，注意v3版本和v4版本部分写法不同：
在v3中

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, "public"),
    contentBasePublicPath: "/serve-content-base-at-this-url",
    serveIndex: true,
    watchContentBase: true,
    watchOptions: {
      poll: true,
    },
  },
};

而在v4中
contentBase/contentBasePublicPath/serveIndex/watchContentBase/watchOptions/staticOptions 等配置已经移到了static配置中。

module.exports = {
  devServer: {
    static: {
      directory: path.resolve(__dirname, "static"),
      staticOptions: {},
      // Don't be confused with `devMiddleware.publicPath`, it is `publicPath` for static directory
      // Can be:
      // publicPath: ['/static-public-path-one/', '/static-public-path-two/'],
      publicPath: "/static-public-path/",
      // Can be:
      // serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index)
      serveIndex: true,
      // Can be:
      // watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar)
      watch: true,
    },
  },
};

//如果你有多个静态文件夹，提供一个对象数组
module.exports = {
  //...
  devServer: {
    static: [
      {
        directory: path.join(__dirname, "assets"),
        publicPath: "/serve-public-path-url",
      },
      {
        directory: path.join(__dirname, "css"),
        publicPath: "/other-serve-public-path-url",
      },
    ],
  },
};

总结

publicPath变成了static下的publicPath。
contentBase变成了static下的directory。
webpack-dev-server可以打包完成并打开在本地浏览器

完整webpack.josn.js如下：

let path = require("path");
// 需要安装依赖 html-webpack-plugin   cnpm install html-webpack-plugin --save-dev
let HtmlWebpackPlugin = require("html-webpack-plugin");
// console.log(path.resolve(__dirname, 'dist'));


module.exports = {
    // 入口文件
    entry: "./src/index.js",
    output: {
        // 输出文件名
        filename: "bundle.js",
        // 输出的路径
        // 绝对路径
        path: path.resolve(__dirname, 'dist')
    },
    // 打包模式
    mode: 'production',
    // loader的配置 可能要处理多种文件 使用数组
    module: {
        // 对某个格式下的文件进行转换处理
        rules: [{
            test: /\.css$/, // 正则匹配需要处理的文件格式
            use: [
                // 将js的样式插入到style标签中 // 有顺序 是从下到上 逆序执行
                "style-loader",
                // 将css转换为js
                "css-loader"
            ]
        }, {
            test: /\.(img|jpg|gif)$/i, // 匹配图片格式
            loader: "url-loader",
            // 图片小于8kb，base64处理，减少请求数量，会使得体积变大
            options: {
                limit: 8 * 1024,
                esModule: false,
                // [hash:10]取名为图片hash的前十位
                // [ext]取图片的拓展名
                name: "[hash:10].[ext]"
            }
        }, {
            test: /\.html$/,
            loader: "html-loader"
        }]
    },
    // plugins插件配置 可能有多个插件 使用数组
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],

    // 模块热更新
    devServer: {
        // 项目构建路径
        // directory: path.resolve(__dirname, "dist"),
        // 启动gzip压缩
        compress: true,
        // 设置端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
        static: [{
            directory: path.join(__dirname, "dist"),
            publicPath: "/serve-public-path-url",
        }, ],
    }
}

参考学习

报错Dev Server has been initialized using an options object that does not match

完整代码

Github