webpack学习总结

1-1.webpack究竟是什么？

webpack其实就是一个模块打包器。

1-2.什么是模块打包工具？

1-3.webpack的正确安装方式？

1-4.使用webpacl的配置文件

1-5.webpack打包的输出内容

2-1什么是loader？

loader其实就是一个打包的方案。
webpack本身是打包js文件的，但是遇到图片、样式、文件等等时，需要我们进行打包的时候，那么就需要借助其他插件来进行打包，那么除了需要安装依赖之外，还要在webpack.config.js进行配置。
下面是图片进行打包的例子：
第一安装file-loader，

npm install file-loader -D

第二配置webpack.config.js

module:{
  rules:[{
    test: /\.jpg$/,
    use:{
      loader: 'flie-loader'
    }
  }]
}

2-2试用loader打包静态资源（图片篇）

file-loader 或者 url-loader

module:{
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader', //file-loader
                options:{
                    //placeholder 占位符
                    name:'[path][name].[ext]',
                    outputPath:'images/',
                    limit:1000
                }
            }
        }]
    }

2-3试用loader打包静态资源（样式篇-上）

style-loader、css-loader、sass-loader、node-sass、postcss-loader、autoprefixer
我们使用postcss-loader和autoprefixer两个插件的时候，可以帮我们自动加上css3的一些前缀，那么需要我们对webpack.config.js和postcss.config.js分别进行配置
postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

webpack.config.js

module:{
        rules: [{
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader',
                'postcss-loader'
            ]
        }]
    }

值得注意的是：
loader顺序不能随意写，有优先顺序的（从上到下，从右到左） 应该先是用autoprefixer和postcss-loader给样式添加前缀，其次采用sass-loader对scss文件进行转义为css，再采用css-loader,分析几个css之间的关系，在把这些css文件汇总合并到一个css文件中，最后style-loader再把生成css片段挂载到head里面的style中

2-4试用loader打包静态资源（样式篇-下）

1).importLoaders:2
2).modules:true
3).打包文字的时候使用：flie-loader

module:{
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',//file-loader
                options:{
                    //placeholder 占位符
                    name:'[path][name].[ext]',
                    outputPath:'images/',
                    limit:1000
                }
            }
        },{
            test: /\.scss$/,
            use: [
                'style-loader',
                // 'css-loader',
                {
                    loader:'css-loader',
                    options: {
                        importLoaders: 2, //通过@import 引入的scss文件也会通过sass-loader和postcs-loader先处理再会来到css-loader这一步过程中
                        modules:true //样式模块化设置，单个页面的js文件中的样式不会影响到其他js页面中样式
                    }
                },
                'sass-loader',
                'postcss-loader'
            ]
        },{
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            use:{
                loader:'file-loader'
            }
        }]
    }

2-5 使用 plugins 让打包更便捷

plugin插件可以在webpack在运行到某一时刻的时候，帮助做一些事情
html-webpack-plugin:会在打包结束后，自动生成一个index.html文件，并且把打包生成的js自动引入到html中
clean-webpack-plugin:在进行打包的时候，先把dist目录下面的所有文件进行删除

2-6 Entry 与 Output 的基础配置

entry:后面可以跟一个入口文件的字符串，也可以跟一个对象
output:可以通过filename:'[name].js'设置来自动给entry设置的文件来定义输出文件名称，
如果不设置filename参数，那么main.js则是默认的文件名称会被生成
publicPath:如果生成的bundle.js 或者 dist.js 会放到cdn上面，那么我们在通过html-webpack-plugin自动生成html的时候，就要把bundle.js或者dist.js文件路径上添加远程cdn地址

// entry:'./index.js',
    entry:{
        main:'./index.js',//会自动生成main.js
        sub:'./index.js'//会自动生成sub.js     生成的名称由参数名称决定
    },
    output: {
        // filename: 'bundle.js',
        filename:'[name].js',
                publicPath:'http://www.cdn.com/'
        path: path.resolve(__dirname,'dist')
    },

2-7 SourceMap 的配置

sourceMap:
当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。

devtool:'cheap-module-eval-source-map' //适用于development环境
devtool:'cheap-module-source-map'//适用于production环境

source-map:会生成.map文件（bundle.js和其他js一个映射关系的一个map文件），速度比较慢
inline-source-map:也会生成map相关的代码，但是这些代码不是文件形式存在的，而是生成后放到main.js 或者bundle.js文件的末尾，速度比较慢
cheap:针对的是自己业务代码错误的一个校验提示,只提示你多少行出错了，不回提示你列出错
module:针对的是第三库错误的一个检验提示
eval:速度非常快，但是错误提示信息不回很全

2-8 使用 WebpackDevServer 提升开发效率

1).watch
2).webpack-dev-server
优点：
检测文件更改，
自动编译打包，
自动打开默认浏览器，
访问地址一个带有http的一个请求地址（便于ajax请求，在devServer的配置项中有一个proxy属性，这个属性可以实现跨域代理）

package.json配置如下：

"scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server"
  },

webpack.config.js配置如下：

devServer:{
        contentBase:'./dist',
        port: 8081,
        open: true
    },

学习链接地址：https://webpack.docschina.org/guides/development/

2-10 Hot Module Replacement 热模块更新

devServer:{
        contentBase:'./dist',
        port: 8081,
        open: true,
        hot: true, //需要配置
        hotOnly: true////需要配置
    },

plugins:[
        new htmlWebpackPlugin({
            template:'index.html'
        }),
        new cleanWebpackPlugin(['dist']),
        new webpack.HotModuleReplacementPlugin() //需要配置的
    ]