前置课程3的课堂笔记-webpack

若愚老师

安装

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

• 通过命令行模式实现
  webpack可以在终端中使用，在基本的使用方法如下：

// {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
// {destination for bundled file}处填写打包文件的存放路径
// 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入如下命令

// webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js

• 通过配置文件来使用Webpack
  根目录下新建一个名为webpack.config.js的文件

module.exports = {
  entry:   __dirname +"app.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录

有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项
有了这个配置之后，再打包文件，只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项

更快捷的执行打包任务
在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径比较麻烦，通过npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可：

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack"  // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

loaders

loaders官方文档
通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

• test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
• loader：loader的名称（必须）
• include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项（可选）

举个栗子：babel-loader

安装：
 // webpack 3.x | babel-loader 8.x | babel 7.x
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
 // webpack 3.x babel-loader 7.x | babel 6.x
npm install babel-loader babel-core babel-preset-env webpack

module.exports = {
  entry:   __dirname +"app.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

插件（Plugins）

• 插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
  Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
• 要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）
• 几个常用的插件：
  • HtmlWebpackPlugin：这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
    npm install --save-dev html-webpack-plugin
  • Hot Module Replacement：（HMR）也是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。

官方文档
参考文章

webpack从入门到精通

git clone git@github.com:slashhuang/webpack2-tutorial.git
cd webpack2-tutorial
cnpm i --verbose //安装所有依赖

安装所有依赖.png
cnpm i -g anywhere
anywhere //随时随地将你的当前目录变成一个静态文件服务器的根目录
安装anywhere.png
anywhere.png

command.js文件中的配置configFile.watch = true;

• entry：

webpack.config.js：
module.exports = {
  entry:{
      index:'./index.js',
    index1:'./index1.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '_[name].js' 
  }
};

• output：

webpack.config.js：
let base = {
      index:'./index.js?t=2',
      index1:'./index1.js'
};

//webpack2 提供了多种配置方案
module.exports = {
  entry:base,
  output: {
    //导出目录
    path: path.resolve(__dirname, 'uuudist'),  // 必须是绝对路径
    publicPath: "/output/uuudist/", // server-relative
    //包规范格式
    libraryTarget:'umd',
    library: "MyLibrary", 
    //文件名
    chunkFilename:'[chunkhash]_[name].js', //用来异步加载
    //hash位数
    hashDigestLength:3,
    //导出文件 
    //hash ==> webpack编译过程
    // chunkhash => webpack对每个文件的hash
    filename: '_[name][chunkhash].js' //'_[name][chunkhash:3].js'
    //name是entry里面的key
  }
};

[chunkhash]类似时间戳，区分缓存文件 每一次文件内容的改变都会使hash值改变，因此以这种方式命名文件无法去重，文件是增量的

• devtool：

devtool: 'source-map',//资源映射表 chrome debug==>
or
devtool: 'cheap-source-map'

• loaders：

 module:{
    //entry => loaders ==> webpack ==> output
    rules:[
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                use: {
                  loader:'babel-loader'
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:{
                        loader:'css-loader',
                        options: {
                           sourceMap: true
                        }
                    }
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader',{
                        loader:'less-loader',
                        options: {
                           sourceMap: true
                        }
                    }]
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader',{
                        loader:'sass-loader',
                        options: {
                           sourceMap: true
                        }
                    }]
                })
            },
            {
                test: /\.(png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                use: {
                    loader:'file-loader',
                    options:{
                        name:'[name]_[sha512:hash:base64:7].[ext]'
                    }
                }
            },
            {
                test: /\.html/,
                use:{
                    loader:"html-loader",
                    options:{
                        minimize: false,
                        attrs:false
                    }
                }
            }
    ]
}

• output：

 plugins:[
            new webpack.ProvidePlugin({
                $: 'jquery'
            }),
            new WebpackNotifierPlugin({  //编译成功会有提示
                title: 'Webpack 编译成功',
                contentImage: path.resolve(process.cwd(), './img/avatar.jpeg'),
                alwaysNotify: true
            }),
            new ExtractTextPlugin({
                filename: "[name].css",
                disable: false,
                allChunks: true
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'common',
                minChunks: Infinity
            })
  ],