webpack4学习总结

webpack4学习记录

---

webpack中文文档指南

写这篇对webpack的基本概念和安装等简单操做省略,主要是记录在跟着官方文档学习webpack时的一些要点。

---

　　前端写代码时，HTML页面中用<script>标签引入的一些外部js文件，来支持代码运行，这些js文件就是项目的“依赖”。webpack就是用了打包管理这些依赖的工具。

• 为何是npm run build?

  　　
  　　 你用vue-cli的时候，老是用npm run build来打包写好的代码，而后代码很成功的被打包到了dist目录下。这些都是由于webpack在配置文件webpack.config.js中设置好的。
  　　

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

　　设置好出口和入口文件的名字位置等，在package.json中添加npm脚本命令build，之后你用npm run build，其实就是执行了webpack。

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },

• 管理非JavaScript文件

　　
　　webpack打包是很厉害,不过它自己只能识别JavaScript文件,对于前端开发中的css,图片,字体等静态资源,就须要各类loader来将其转化为最终依赖图能够引用的模块。
　　loader须要配置两个选项：test和use，tset肯定须要loader转化的文件，use肯定用哪一个loader转化，在使用以前，外部loader须要npm intsall一下。
　　　　

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

• 我原来用<script src='xxx.js'>也能够啊

  　　一个项目中有多个js文件，若是须要在一个js中用到另外一个js的方法，在没有ES模块这些东西时，须要把整个js文件引入到html页面中，并且顺序不能出错，好麻烦的。可是用了webpack，它就能够本身去根据一个入口js寻找依赖，再配合模块化的写法，导入你须要的功能，这样就能够方便你们更好的组织代码。
  

　　　　　　　　　　　　　　不用webpack，目录结构复杂后会很烦...
　　　　

　　
　　　　　　　　　　　　　　　用了webpack，超清晰!

• 打最干净的包！

　　　　开发时每次打包，可能都会有一些弃用的东西，若是要保持打出的dist是最小的包，就使用下面这两个插件来管理输出。

const HtmlWebpackPlugin = require('html-webpack-plugin')
        const CleanWebpckPlugin = require('clean-webpack-plugin')
        module.exports = {
          entry: {
            app: './src/index.js',
            print: './src/print.js'
          },
          plugins: [
            new CleanWebpckPlugin(['dist']),
            new HtmlWebpackPlugin({
              title: 'Output Management'
            })
          ],