Webpack入门

webpack.png

Webpack 是一个前端资源加载/打包工具。
它将根据模块的依赖关系进行静态分析
然后将这些模块按照指定的规则生成对应的静态资源(一个静态文件)，
从而减少了页面请求。

安装 Webpack

npm install webpack -g
"假如介意npm安装速度改成cnpm（切换成淘宝镜像源:npm install -g cnpm --registry=https://registry.npm.taobao.org）"

配置文件

创建 webpack.config.js 文件，代码如下所示：

//这是一个 [Node.js 核心模块](https://nodejs.org/api/modules.html)，用于操作文件路径
const path = require('path'); 
// 通过 npm 安装,为应用程序生成一个 HTML 文件，并自动注入所有生成的 bundle。
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
//entry 指示 webpack 应该使用哪个模块,默认值是 `./src/index.js`，
//你可以通过在 [webpack configuration](https://webpack.docschina.org/configuration) 中配置 `entry` 属性
//来指定一个（或多个）不同的入口起点
    entry: "./src/index.js",
//output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。
//主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
//我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成到哪里。
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    },
//webpack 开箱可用的自带能力即只能理解 JavaScript 和 JSON 文件
//loader让 webpack 能够去处理其他类型的文件，并将它们转换为有效 [模块](https://webpack.docschina.org/concepts/modules)
    module: {
        loaders: [
            { 
               //'/\.css$/' 或 "/\.css$/" 不一样。
               //前者指示 webpack 匹配任何以 .css结尾的文件，
               //后者指示 webpack 匹配具有绝对路径 '.css' 的单个文件。
               test: /\.css$/, //识别出哪些文件会被转换
               loader: "style-loader!css-loader" //定义出在进行转换时，应该使用哪个 loader
            }
        ]
    },
//想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中
      plugins: [
           new HtmlWebpackPlugin({template: './src/index.html'})
      ],
      //提供 mode 配置选项['production','development','none']，告知 webpack 使用相应模式的内置优化
     //模式相关配置详情请参考:https://webpack.docschina.org/configuration/mode/
      mode: 'production' // 默认模式
};

整理的同时也在巩固，望看到的同学及时查漏补缺。

何以解忧 唯有学习