以下只是个人在项目的一些配置，更详细的配置项请查看webpack官方文档

英文官方网址: https://webpack.js.org/
中文网址: https://doc.webpack-china.org/configuration/
GitHub地址: https://github.com/webpack/webpack

本配置文件的依赖项说明

1. 服务与热更新 [官方GitHub地址](https://github.com/webpack/webpack-dev-server)

npm install webpack webpack-dev-server –save-dev
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,'dist'),
//服务器的IP地址，可以使用IP也可以使用localhost
host:'localhost',
//服务端压缩是否开启
compress:true,
//配置服务端口号
port:8088
}
在package.json文件中配置一下 "server" 执行的脚本, 可在执行命令后自动打开浏览器:
"scripts": {
"server": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
}
@@ webpack常用命令使用如下：
1、默认使用当前目录的webpack.config.js作为配置文件。如果要指定另外的配置文件，可以执行：webpack –config webpack.custom.config.js
2、webpack 的执行也很简单，直接执行  $  webpack --display-error-details
即可，后面的参数“–display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
3、常用命令
webpack的使用和browserify有些类似，下面列举几个常用命令：
1、webpack 最基本的启动webpack命令
2、webpack -w (webpack --watch的简写来的)该watch方法，可以实时进行打包更新
3、webpack -p 对打包后的文件进行压缩
4、webpack -d 提供SourceMaps，方便调试
5、webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
6、webpack --profile 输出性能数据，可以看到每一步的耗时
7、webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块，依赖什么而打包都会列出来
8、webpack --progress 当前打包的进度条
9、webpack --display-reasons 打包模块的原因，因为什么打包
前面的四个命令比较基础，使用频率会比较大，后面的命令主要是用来定位打包时间较长的原因，方便改进配置文件，提高打包效率。
@只安装生产环境中的依赖包: npm install --production

2. 构建前清理 /dist 文件夹 [官方GitHub地址](https://github.com/johnagan/clean-webpack-plugin)

npm install clean-webpack-plugin --save-dev

// 在webpack.config.js中进行配置一下
const CleanWebpackPlugin = require('clean-webpack-plugin');

// plugins插件选项要使用它
plugins: [
    new CleanWebpackPlugin(['dist'])
    ]

3. css文件打包

>npm中的网址：https://www.npmjs.com/package/style-loader、https://www.npmjs.com/package/css-loader

npm install style-loader css-loader --save-dev
module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },

4. 配置JS压缩

- webpack中自带了这个插件，直接配置即可

// 在webpack.config.js中引入这个uglifyjs-webpack-plugin插件
const uglify = require('uglifyjs-webpack-plugin');

// plugins插件选项要使用它
 plugins:[
        new uglify()
    ]

5. 打包HTML文件

>GitHub中的网址：https://github.com/jantimon/html-webpack-plugin

// 在webpack.config.js中引入这个html-webpack-plugin插件
const htmlPlugin= require('html-webpack-plugin');

// plugins插件选项要使用它
 plugins:[
        new htmlPlugin({
            minify:{
                // 去掉html中属性的单双引号
                removeAttributeQuotes:true
            },
            // 设置为true避免缓存， 在HTML中引入的外联文件地址后面会加上随机的一段hash生成的字符串
            hash:true,
            // 打包的来源文件
            template:'./src/index.html'
           
        })
    ]

6. 图片与文件打包

>file-loader(解决引入路径的问题)、url-loader(可将图片base64编码)

npm install file-loader url-loader –save-dev

module:{
    rules: [
        {
            test: /\.(png|jpe?g|gif|svg)$/,
            use: [{
                // 如今的url-loader自带了file-loader的功能，以后不需要再单独配置file-loader了
                loader: "url-loader",
                options: {
                    // 图片大于1000字节bytes，就转换为base64编码
                    limit: 1000,
                    // 把打包的图片放到这个目录下
                    outputPath: "images/"
                }
            }]
        }
    ]
}

7. CSS分离:extract-text-webpack-plugin

>GitHub官方地址 https://github.com/webpack-contrib/extract-text-webpack-plugin

npm install extract-text-webpack-plugin --save-dev

// 在webpack.config.js中引入这个extract-text-webpack-plugin插件
const extractTextPlugin = require("extract-text-webpack-plugin");

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            }
          ]
    }

css打包后图片的路径问题解决：
var website = {
  publicPath: "http://192.168.0.106:8088/"
}
//出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path: path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename: '[name]-[hash:8].js',
        publicPath: website.publicPath
    },

8. html文件中通过img:src引入的图片，打包后的路径错误处理方法

>GitHub官方地址 https://github.com/wzsxyz/html-withimg-loader

npm install html-withimg-loader --save-dev

// 直接配置即可使用，打包后的路径就是正确的了
module:{
        rules: [
            {
                test: /\.(htm|html)$/i,
                use:[ 'html-withimg-loader'] 
            }
          ]
    }

9. less-loader的讲解

*先安装Less的服务，才能进行less-loader打包服务
npm install less --save-dev
npm install less-loader --save-dev

{
    test: /\.less$/,
    use: extractTextPlugin.extract({
        use: [{
            loader: "css-loader"
        }, {
            loader: "less-loader"
        }],
        fallback: "style-loader"
    })
 }

10. sass文件打包与分离

*node-sass：因为sass-loader依赖于node-sass，所以需要先安装node-sass
npm install --save-dev node-sass
npm install --save-dev sass-loader

{
    test: /\.scss$/,
    use: extractTextPlugin.extract({
        use: [{
            loader: "css-loader"
        }, {
            loader: "sass-loader"
        }],
        // use style-loader in development
        fallback: "style-loader"
    })
 }

11. postcss-loader自动添加css3前缀

>GitHub官方地址 https://github.com/postcss/postcss-loader >GitHub官方地址 https://github.com/postcss/autoprefixer（可根据浏览器的版本就行配置添加前缀）

*需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）
npm install postcss-loader autoprefixer --save-dev

// 建立一个postcss.config.js文件, 配置以下内容
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

// 对postcss.config.js配置完成后，还需编写我们的loader配置
{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader"
        }, {
            loader: "css-loader",
            options: {
                modules: true
            }
        }, {
            loader: "postcss-loader"
        }
    ]
}

// 配置提取CSS的loader配置
{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })
    
}

12. 运用PurifyCSS插件剔除没有使用到的css样式

>GitHub官方地址 https://github.com/webpack-contrib/purifycss-webpack

* PurifyCSS-webpack 要依赖于 purify-css 这个包，所以这两个都需要安装
npm i -D purifycss-webpack purify-css

1.引入glob:
因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob
const glob = require('glob');

2.同样在webpack.config.js文件头部引入purifycss-webpack
const PurifyCSSPlugin = require("purifycss-webpack");

3.配置plugins
这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了
plugins:[
    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
]

13. Babel编译ES6、7、8的安装与配置

>GitHub官方地址 https://github.com/babel/babel-loader

* 现在babel官方推荐babel-preset-env 取代了之前的 babel-preset-es2015，babel-preset-env可以编译ES6、7、8
npm install --save-dev babel-loader babel-core babel-preset-env (忽略这个babel-preset-es2015) babel-preset-react

{
    test: /\.(jsx|js)$/,
    use:{
        loader: 'babel-loader',
        options: {
            presets: [
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}


或 单独提出来配置

在项目根目录新建.babelrc文件，并把配置写到文件里
{
    "presets": ["react","env"]
}

webpack.config.js里的loader配置
{
    test: /\.(jsx|js)$/,
    use: {
        loader:'babel-loader',
    },
    exclude: /(node_modules|bower_components)/
}

14. 关于打包后的代码调试问题

在使用webpack时只要通过简单的devtool配置，webapck就会自动给我们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让我们调试起来更简单。

在配置devtool时，webpack给我们提供了四种选项：
    1、source-map: 在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度。
    2、cheap-module-source-map: 在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
    3、eval-source-map: 使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
    4、cheap-module-eval-source-map: 这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。

四种打包模式，有上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对执行和调试有一定的影响。

建议，如果大型项目可以使用source-map，如果是中小型项目使用eval-source-map就完全可以应对，需要强调说明的是，source map只适用于开发阶段，上线前记得修改这些调试设置。


// 简单的配置
module.exports = {
  devtool: 'eval-source-map', // 加上这句配置信息就行了
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}
 
总结：调试在开发中也是必不可少的，但是一定要记得在上线前一定要修改webpack配置，在打出上线包。

15. 关于开发环境与生产环境的配置问题

@只安装生产环境中的依赖包: npm install --production

1、开发环境与生成环境的打包配置如下：
    console.log(encodeURIComponent(process.env.type)); // 打印我们npm run dev输出的值
    // 这里的type是npm执行script的build通过set关键字传过来的
    if (process.env.type === "build") {
    // 生产环境的
    var website = {
        publicPath: "http://www.qqyiyi.cn/"
    }
    } else {
    // 开发环境的
    var website = {
        publicPath: "http://192.168.0.106:8088/"
    }
    }


2、window环境下的配置：
    "scripts": {
        "dev": "set type=dev&webpack",
        "build": "set type=build&webpack"
    }

3、mac和Linux环境下的配置：
    "scripts": {
        "dev": "export type=dev&&webpack",
        "build": "export type=build&&webpack"
    }

16. 在webpack中引入第三方库

在webpack中引入第三方库有两种方法：
    1、直接在项目中 import jQuery from 'jquery'; 加载进来也行
    2、或者利用webpack自身携带的插件ProvidePlugin来引入，
    然后再plugins选项配置即可，如下：
        plugins: [
            new webpack.ProvidePlugin({
            jQuery: "jquery", // 配置引入第三方库jquery
        })]

17. 配置webpack中的watch方法来实时打包更新

1、webpack提供了功能，直接配置就可以使用：
    module: {
        rules: [
            watchOptions: { // 实时打包更新
                poll: 1000, // 每1s时间就检测文件是否修改，修改了就自动帮我们打包
                aggregeateTimeout: 500, // 设置的是我们连续按Ctrl+S保存时，500毫秒内只执行打包一次
                ignored: /node_modules/, // 这个文件夹不监视
            }
        ]
    }

2、还要在package.json的script选项配置脚本 加上--watch：
    "scripts": {
    "dev": "set type=dev&webpack --watch"
  }

18. 打包的文件里最前面打印出版权类似的信息

配置如下：
    plugins: [
        // 在每次打包的文件里第一行都会带上这条的信息的
        new webpack.BannerPlugin('qqyiyi版权所有')
    ]

19. 拷贝项目中的静态资源文件 [插件的GitHub地址](https://github.com/webpack-contrib/copy-webpack-plugin)

使用说明(配置好了之后,插件会递归式搜索把文件目录及文件一起拷贝进去):
  1、现在webpack.config.js文件中引入该插件
    const copyWebpackPlugin = require('copy-webpack-plugin'); // 集中拷贝静态资源
  2、然后在plugins配置项进行配置
    new copyWebpackPlugin([
      {
        from: __dirname + '/src/public', // 需要拷贝的资源来自哪个文件夹
        to: './public' // “./”是指上面output导出的dist文件夹的根目录里的public文件夹下
      }
    ]), // 拷贝项目的静态资源文件