webpack4学习总结

想做大牛的蜗牛

2019-06-28

关注关注

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，目录结构复杂后会很烦...
　　　　

webpack4学习总结
　　　　　　　　　　　　　　　用了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'
            })
          ],

webpack build