了解webpack-4.0版本（一）

时间 2019-11-06

标签了解 webpack 4.0 版本繁體版

原文原文链接

介绍

近期发布了 webpack 4.0.0 的 beta 版本,若是想了解和以前版本的区别，不妨先本身搭建一个webpack的简单应用体验一下。css

1.简单案例

安装 npm i webpack --webpack-cli -Dhtml

1.1 为了使用命令行进行打包，须要在package.json中配置

"scripts": {
    "build": "webpack --mode development",
    "dev": "webpack-dev-server --open --mode development"
  },
复制代码

1.2 webpack.config.js配置

let path = require('path');
module.exports = {
    entry: './src/index.js',//入口配置
    output:{
      path:path.join(__dirname,'dist'),//只能写绝对路径，输出文件夹
      filename:'bundle.js'//输出文件名
    },  
    module:{
       
    },
    plugins:[

    ]
}
复制代码

执行 npx webpack 或者 npm run build压缩 src文件夹下的index.jsjquery

1.3 对打包后的js解读

在bundle.js中，生成一个字执行函数，把要打包的js定义为实参，传入到自执行函数当中。
首先会先构建模块的缓存，目的是为了提升模块的加载速度，下次直接从缓存中取

1.4 使用http服务自动访问项目

在dist文件夹下建立index.html文件引入bundle.js
在src目录下建立index.css 并在index.js中引入index.css

require('./index.css');
复制代码

执行npm install style-loader css-loader并在webpack-config.js 中配置loader

rules:[
        {
          test:/\.css$/,
          loader:["style-loader","css-loader"]
        }
      ]
   },
复制代码

执行 npm install webpack-dev-server -D
在package.json中配置 "dev": "webpack-dev-server --open --mode development",在配置--open 后，最后执行npm run dev会自动启动服务打开预览。
在webpack.config.js配置静态文件服务器，能够预览打包后的项目

devServer:{
       contentBase:'./dist',//静态文件跟目录
       host:'localhost',//配置主机
       port:8080,//主机名
       compress:true//服务器返回给浏览器是否使用gzip压缩
    }
复制代码

npm run dev成功启动项目

webpack-dev-server是一个小型的Node.jsExpress服务器,它使用webpack-dev-middleware来服务于webpack的包，咱们能够看到产出的文件(bundle.js)，可是webpack-dev-server打包的文件会放到内存中，不可见。webpack

1.5 使用动态模板产出项目

npm i html-webpack-plugin -D 根据模板生成一个html文件
配置webpack-config.js

output:{
      path:path.join(__dirname,'dist'),//只能写绝对路径
      filename: '[name].[hash].js'//打包后的文件名
    },  
复制代码

输出文件名，改成变量加上哈希值，避免页面引入js有缓存的状况web

const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins:[
      new HtmlWebpackPlugin({
          template: './src/index.html',
          filename: 'index.html',
          title: 'hello world!'
      }),
    ],
复制代码

src下建立index.html 模板文件，而且配置参数。npm

<!DOCTYPE html>
<html lang="en">E:\韩佳骏\FF\test\webpack\dist\index.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
复制代码

npm run build dist目录下会自动生成打包后的文件，插入js和传入的title属性

1.6 多入口配置

首先为了每次build后dist下的目录从新打包，方便查看，咱们使用json

npm i clean-webpack-plugin -D
复制代码

引入webpack.config.js中bootstrap

const CleanWebpackPlugin = require('clean-webpack-plugin');
 plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
   ...
  ],

复制代码

若是咱们多个页面，而且每一个页面引入的模块不相同，该如何配置?浏览器

entry: {
     index:'./src/index.js',
     base:'./src/base.js'
  },
复制代码

entry 中配置的key至关于每个代码块chunk,配置多个页面时，每一个页面配置须要的模块缓存

plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
    new HtmlWebpackPlugin({
      template: './src/index.html',//指定产的HTML模板
      filename: 'index.html',
      title: 'hello index!',
      chunks:['index']
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',//指定产的HTML模板
      filename: 'base.html',
      title: 'hello base!',
      chunks: ['base']
    }),
  ],
复制代码

假如咱们须要引入一个公共模块common.js,好比是jquery，咱们还要其余模块内部引用jquery，这时 $这个变量被封装在模块内部，其余模块没法拿到jquery对象$，这时须要在plugin中使用一个模块

plugins: [
      //用来自动向模块内部注入变量
      new webpack.ProvidePlugin({
          $: 'jquery'
       }),...
复制代码

假如咱们想把$变成全局变量，那么要引入expose-loader，它会先加载此模块，而后获得模块的导出对象，而且挂载到window

写法：
expose-loader?全局变量名:模块名
let $ = require('expose-loader?$!jquery');
复制代码

或者

rules: [
       {
        test: require.resolve('jquery'),
        use: {
          loader: 'expose-loader',
           options: '$'
         }
       },
复制代码

1.7 多个页面配置

let pages = ['index', 'base'];
pages = pages.map(page => new HtmlWebpackPlugin({
  template: './src/index.html',//指定产的HTML模板
  filename: `${page}.html`,//产出的HTML文件名
  title: `${page}`,
  chunks: [`${page}`],//在产出的HTML文件里引入哪些代码块
  hash: true,// 会在引入的js里加入查询字符串避免缓存,
  minify: {
    removeAttributeQuotes: true
  }
}))
//....
 plugins:[
 //....
 
 ...pages
 ]
复制代码

1.8 处理图片

在entry 入口配置为main.js,src文件夹下建立images目录放入一张图片

let src = require('./images/timg.jpg');
let img = new Image();
img.src = src;
document.body.appendChild(img);
复制代码

npm i file-loader url-loader -D
复制代码

{
           //file-loader是解析图片地址，把图片从源位置拷贝到目标位置而且修改原引用地址
           //url-loader能够在文件比较小的时候，直接变成base64字符串内嵌到页面中
           test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/,
           loader: {
               loader: 'url-loader',
               options: {
                   limit: 5 * 1024,
                   //指定拷贝文件的输出目录
                   outputPath: 'images/'
               }
           }
       },
复制代码

npm run build 以后顺利在dist 目录下生成一个images文件。浏览器也顺利访问这张图片。

1.9 使用扩展名

resolve: {
        //引入模块的时候，能够不用扩展名 
        extensions: [".js", ".less", ".json"],
        alias: {//别名
            "bootstrap": "bootstrap/dist/css/bootstrap.css"
        }
复制代码