前端需掌握的技能—Webpack

一、为什么需要掌握webpack。
由于平台编辑会出现很多乱码和图片顺序乱问题，所以补充了一个worl版本 webpack.docx

类型：

售价：0

大小：852KB

下载：3次

描述：webpack

[下载]

。  

当我们写es6、scass、less的时候需要用它来转换打包；可以使用热替换来开发，保存代码浏览器自动刷新；可以嵌入eslint来验证前端代码规范，就可以避免代码难维护，下个人接手更容易读懂代码；在使用react和vue的时候也必须使用到webpack；我在使用vue-cli的时候常常遇到一些配置报错，就导致无从下手，如下图。

图片：)D`6W6EEXKXY6}{LEW]I%3F.png

0cjs的意思是0配置，webpack4不会像以前版本那样需要webpack.config.js打包入口文件，它的默认入口为’./src’和默认出口’./dist’。
新建一个src文件夹，把js拷贝进去，执行打包代码，自动生成一个dist文件夹，里面存在打包好的js。执行webpack --mode development快捷打包。

图片：2.png

生成的文件main.js和index_tes一样，只实用小项目，不需要配置文件的。
四、配置文件的入口和出口
4.1新建一个webpack.config.js文件。

图片：3.png

新建一个input.js文件作为入口文件，执行webpack打包生成dist文件夹及其文件夹下的output.bundle.js文件。
4.2 打包多个文件。
4.1只能打包一个js文件，enty提供打包多个文件。重新新建三个js文件，在config里面配置三个文件信息，然后执行打包，如下图。

图片：4.png

默认是生产模式，如果需要打包开发模式只需要配置mode的类型以下是配置代码。

module.exports = {
entry: {
home: './home.js',
about: './about.js',
other: './other.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
mode: 'development'
};

五、加载url_loader

当文件大小小于某个指定的size之后，转换为dataUrl形式。
 为什么要使用它呢？因为网站存在很多图片，如果网站每张图片都需要加载就会导致网站性能差，过去采用雪碧图，但是雪碧图的扩展不好，而url_loader能把图片打包到js或者css文件，图片就不是以物理形式存在，而是base64的形式存在某个文件中。
5.1 首先执行 npm init -y 生成package.json文件。
5.2 执行 npm install url-loader -S 把url-loader全局安装。
5.3 执行 npm install file-loader -S，如不执行这步webpack报错，它是处理文件的依赖。
5.4 配置以下文件，

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i, //编译的图片格式
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, //小于8kb的图片才会被编译
            },
          },
        ],
      },
    ],
  }
  }


5.5 在js文件引入图片之后，执行打包，系统就把小于8kb的图片打包进入js文件之中。六、babel-loader
Es6和es7本身对浏览器兼容不好，而babel-laoder能把es6和es7转换为es5，很常用。
6.1 首先安装


npm install -D babel-loader @babel/core @babel/preset-env webpack


6.2 在js配置文件写入


module: {
  rules: [
    {
      test: /\.m?js$/, //编译的文件格式
      exclude: /(node_modules|bower_components)/, //需要排除的文件格式
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'], //支持的规则
           plugins: ['@babel/plugin-proposal-object-rest-spread'] //可以填写react、vue、ang就可以支持三大框架

        }
      }
    }
  ]}


6.3 写一段es6的代码，执行打包，就已经转换为es5文件。

七、scass-loader
处理scass和css文件。
7.1 安装npm install sass-loader node-sass -D和npm install css-loader style-loader -D
同时还得装cnpm install color-name -D  不然打包时会报错。
7.2 写入以下规则


rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]

7.3 在目录下面新建一个scss文件,写入一些样式，然后执行打包，把scss打包进入到js文件里。

八、MiniCssExtractPlugin

它的作用也是打包css，不过是单独把scss处理到css文件里，而不是打包到js文件，这样更好，因为打包到js导致多了css代码，不利于debug。
8.1 安装 cnpm install mini-css-extract-plugin -D
8.2在配置文件引入


const MiniCssExtractPlugin = require('mini-css-extract-plugin');


在和modul同级的地方写入规则

plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
],


改下rules的配置规则


rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, //默认的使用插件打包
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}]



九、DefinePlugin



这个功能主要配置开发环境和生产环境的接口地址变量，因为在开发的时候使用的地址和上线的地址使用不一样，
在里面配置好地址，整个项目都可以引用。
9.1 先引入webpack  


const webpack = require('webpack')


在配置


plugins: [
new webpack.DefinePlugin({
'SERVICE_URL': JSON.stringify('https://dev.example.com')
})
],


然后在入口js文件可以写一个测试文件


async function sayHello() {
const result = await fetch(SERVICE_URL);
console.log(result);
}
sayHello();


执行打包。进入打包好的文件查询就可以查询到对应的全局地址。

十、HtmlWebpackPlugin



协助生成HTML文件。
10.1 安装cnpm install html-webpack-plugin -D


引入const HtmlWebpackPlugin = require('html-webpack-plugin');
在规则在配置 new HtmlWebpackPlugin()


10.2执行打包，自动生成一个html文件。同时自动的引入了css和js，如下图。

10.2 自定义的html。
配置文件写入


new HtmlWebpackPlugin(
{
title: 'My App', //标题
filename: 'admin.html', //输出的html
template: 'test.html' //引入的文件  //引入的html
}


新建一个test文件。里面写入自定义的html内容，执行打包生成一个admin.html的文件。
十一、DevServer 热替换
启动服务，能实现热替换，作用就是每次保存代码浏览器会自动刷新页面
11.1安装 cnpm install webpack-dev-server -D 然后在本地安装webpack npm install webpack，如果不安装本地的webpack启动热替换会报错，我的出现了。
11.2 打开package.json 配置


"scripts": {
"start": "webpack-dev-server --open"
},


11.3打开webpack.config.js分别配置


devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true, //是否压缩
port: 9000//端口
},
plugins: [
new webpack.HotModuleReplacementPlugin() //热更替
],


11.4 启动 npm run start 启动成功之后打开端口文件，实现了浏览器自动筛新的功能。


以上的配置都是在开发中常用的配置，当然还有很多配置没涉及，不常用的需要自己下去探索。