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

若愚老师

安装

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

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

npm install --save-dev webpack
npm install --save-dev webpack@

首先我们创建一个目录,初始化 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官方文档
通过使用不同的loaderwebpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分析转换scsscss,或者把下一代的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 [email protected] @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 [email protected]:slashhuang/webpack2-tutorial.git
cd webpack2-tutorial
cnpm i --verbose //安装所有依赖

前置课程3的课堂笔记-webpack_第1张图片
安装所有依赖.png

cnpm i -g anywhere
anywhere //随时随地将你的当前目录变成一个静态文件服务器的根目录
前置课程3的课堂笔记-webpack_第2张图片
安装anywhere.png

前置课程3的课堂笔记-webpack_第3张图片
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
            })
  ],

你可能感兴趣的:(前置课程3的课堂笔记-webpack)