webpack

webpack安装

1、创建工程目录；
2、初始化工程目录：npm init。
3、全局安装webpack-cli。 npm install -g webpack-cli
4、全局安装webpack。 npm install -g webpack
(5、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。
6、在webpack –mode development/production可串联设置其他参数。)
建立配置文件
另：
建立工程文件
npm init -y
npm install webpack webpack-cli –save-dev
建立dist 、src目录
使用npx webpack打包
Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack）
构建命令：npx webpack –config webpack.config.js
如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 –config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
在package.json中添加npm脚本使用快捷方式如：
“build”: “webpack” 便可以在命令行中使用npm run build开始构建

webpack配置文件

基本配置

1 入口出口基本配置

const path=require('path')
module.exports={
    entry:'./src/scripts/main.js',
    output:{
        path:path.resolve(__dirname,'dist/js'),
        filename:'bundle.js'
    },
    mode:production
}

引入path，设置入口文件以及出口
2 使用Loader
A. 命令行中 npm install –save-dev style-loader css-loader （加载css） npm install –save-dev file-loader（加载图片，并且file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录，可以使用其加载字体）
B.导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader npm install –save-dev csv-loader xml-loader

配置文件代码

module: {
        rules: [
               {
                 test: /\.css$/,
                 use: [
                   'style-loader',
                   'css-loader'
                 ]
               },   
              { test: /\.js$/, 
                exclude: /node_modules/,//include:path.resolve(__dirname,'src'),exclude:path.resolve(__dirname,'node_modules')
                loader: "babel-loader"
              }，


               {
                 test: /\.(png|svg|jpg|gif)$/,
                 use: [
                   'file-loader'
                 ]
               },
               {
                 test: /\.(woff|woff2|eot|ttf|otf)$/,
                 use: [
                   'file-loader'
                 ]
               },
               {
                 test: /\.(csv|tsv)$/,
                 use: [
                   'csv-loader'
                 ]
               },
               {
                 test: /\.xml$/,
                 use: [
                   'xml-loader'
                 ]
               }
        ]  
    }

3.多个入口起点以及插件
(entry也可以是一个数组，webpack会把这平行的几个文件打包成一个文件)

const path = require('path');

  module.exports = {
        entry: {
             app: './src/index.js',
             print: './src/print.js'
           },
            output: {
             filename: '[name].bundle.js',
             path: path.resolve(__dirname, 'dist')
            }
  };

根据入口起点动态生成bundle名称，其他还有两个占位符[hash]以及[chunkhash]例如[name]-[hash].js
hash是每次打包生成的hash值，chunkhash是打包一次文件的值，当这个文件改动时值才会改变，否则在此打包并不会在生成一个新的chunkhash值也就是不会生成一个新的文件，用于版本管理。
**A.**HtmlWebpackPlugin
安装插件 npm install –save-dev html-webpack-plugin

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist/js')
      publicPath:'https://cdn.com/'//上线 将绝对路径的地址替换为线上地址
    }
  };

此时生成的html文件与默认的index.html没有任何关联，仅仅是生成了一个引入来了上面打包好后的js文件而已。下面是此插件的一些配置

new htmlWebpackPlugin({
    title:'设定title值',
    template:'index.html',//根目录下的模板文件，上下文环境context是在根目录，因此指的就是根目录的index.html
    //但是生成的文件也会在output指定的js文件夹下，要让生成的html和js不在一个文件夹可以做一下改动
    //output:{path: path.resolve(__dirname, 'dist'),filename:'js/[name]-[chunkhash].js'},这样生成的html在dist目录，js文件还是在dist/js下
    filename:'index-[hash].html',//指定生成文件的名称，
    inject：'head/body',//指定脚本文件嵌入哪个标签（新版本使用会报错，应该是用法变了）
    minify:{//压缩生成html
        removeComments:true,//删除注释
        collapseWhitespace：true//删除空格
    }，
    chunks:['app'],//允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中
    excludeChunks:['app']这个与chunks配置项正好相反，用来配置不允许注入的thunk。
})可以在模板html中通过<%=  %>语法取得htmlWebpackPlugin选项中设定的值，比如<%= htmlWebpackPlugin.options.title  %>
模板引擎运行js代码<% %> 因此可以根据<%= htmlWebpackPlugin.file.chunks.app/print.entry %>的位置来配置每个新生成脚本的位置
配置多个页面时只需要将该插件多次实例化，然后配置其模板文件和输出文件名即可

html-webpack-plugin详解
清理 /dist 文件夹 npm install clean-webpack-plugin –save-dev
const CleanWebpackPlugin = require('clean-webpack-plugin'); new CleanWebpackPlugin(['dist'])

const path=require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:{
        main:'./src/scripts/main.js',
        app:'./src/scripts/app.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/[name]-[chunkhash].js'
    },
    mode:'production',
    plugins:[
        new htmlWebpackPlugin({
            title:'设定title值',
            template:'index.html',
            filename:'index-[hash].html',
            chunks:['app'],
            excludeChunks:['app'],
            minify:{
            removeComments:true,
            collapseWhitespace:true
            }，

        })
    ],
    module: {
        rules: [
           {
             test: /\.css$/,
             use: [
               'style-loader',
               'css-loader'
             ]
           },
            {
             test: /\.js$/,
             use: [
               'babel-loader'
             ],
             exclude:'./node_modules/'
           },
           {
             test: /\.(png|svg|jpg|gif)$/,
             use: [
               'file-loader'
             ]
           },
           {
             test: /\.(woff|woff2|eot|ttf|otf)$/,
             use: [
               'file-loader'
             ]
           },
           {
             test: /\.(csv|tsv)$/,
             use: [
               'csv-loader'
             ]
           },
           {
             test: /\.xml$/,
             use: [
               'xml-loader'
             ]
           }
        ]  
    }
}