Webpack

Webpack - 前端工程化

Posted on 03-19 2020,9 min read

Webpack-前端工程化


Organized by安南 City

Completion time2020-03-19

Send error to emailcity@nanzc.com


Webpack让一切变得简单

是一个流行的前端项目构建工具(打包工具)。

作用

可以解决当前 Web 开发中所面临的困境。

webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员 把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性

 

当前 Web 开发面临的困境


  • 文件依赖关系错综复杂
  • 静态资源请求效率低
  • 模块化支持不友好
  • 浏览器对高级Javascript 特性兼容程度较低
  • etc…

 

Webpack 项目


那么了解了Webpack因何而存在,接下来就开始创建Webpack项目吧。

 

  • 新建项目空白目录

  • 运行命令,初始化包管理配置文件package.json

    npm init –y
    
  • 新建src源代码目录

  • 新建src => index.html:首页

  • 初始化首页基本结构

  • 创建入口文件src => index.js

 

安装和配置


接下来让我们在项目中开始安装webpack

 

  • 安装webpack相关的包

    npm install webpack webpack-cli –D
    
  • 在项目根目录中创建webpack配置文件:webpack.config.js

    // webpack.config.js
    
    module.exports = {
        // 指定构建模式
        // value:development-不会压缩不会混淆; production-压缩并混淆
        mode: "development"
    }
    
  • package.json配置文件中的scripts节点下,新增 dev 脚本如下:

    // script 节点下的脚本,可以通过 npm run key 执行
    "scripts": {
    	"dev": "webpack"
    }
    
  • 打包Webpack

    npm run dev
    

 

入口和出口


打包的默认约定:

入口文件src => index.js

出口文件dist => main.js

 

接下来,我们看下如何修改打包的入口和出口:

// webpack.config.js

const path = require("path"); // 引入路径处理模块

module.exports = {
    // ...
    // 入口文件路径
    entry: path.join(__dirname, "./src/index.js"),
    // 出口
    output: {
        // 路径
        path: path.join(__dirname, "./dist"),
        // 文件名
        filename: "bundle.js"
    }
};

 

自动打包


在修改完项目后,总是需要重新打包,那么如何自动打包呢?

 

  • 安装支持项目自动打包的工具

    npm install webpack-dev-server –D
    
  • 修改package.json => scripts中的dev命令

    "scripts": {
    	"dev": "webpack-dev-server"
    }
    
  • 注意:打包后的文件在webpack-dev-server启动的http服务器/根目录下,且打包的文件处于内存中,项目下不可见

    <!-- 如打包文件名:buldle.js -->
    <!-- 引用时使用 -->
    <script src="/buldle.js"></script>
    
  • 运行命令即可启动自动打包服务器

    npm run dev
    
  • 打开服务器默认地址查看:http://localhost:8080

 

每次都需要手动打开服务器?看完下面的相关配置小结,你的疑惑便可以解决。

 

相关配置

配置自动打包相关的参数,package.json => scripts => dev

 // package.json

 // --open 打包完成后自动打开浏览器页面
 // --host 配置 IP 地址
 // --port 配置端口
 "scripts": { 
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888" 
  }

 

虽然可以自动打开浏览器页面了,但是打开的页面却不对。

这是因为服务器/和项目根目录一致,而预览页面处于src下,那么我们该如何解决?

 

生成预览页面


接下来我们使用插件html-webpack-plugin配置项目预览页面

 

  • 安装生成预览页面的插件

    npm install html-webpack-plugin –D
    
  • 修改webpack.config.js文件头部区域

    // webpack.config.js
    
    // 导入生成预览页面插件
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    // 创建插件实例对象
    const htmlPlugin = new HtmlWebpackPlugin({
        // 指定模板文件
        template: "./src/index.html",
        // 指定生成文件名,文件处于内存中,在目录不显示
        filename: "index.html"
    });
    
    // ...
    
  • 修改webpack.config.js文件中向外暴露的配置对象,新增如下配置节点:

    // webpack.config.js
    
    // ...
    module.exports = {
        // ...
        plugins: [ htmlPlugin] // plugins 数组是webpack 打包期间会用到的一些插件列表
    }
    
  • 启动打包服务器查看即可

 

加载器


在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块,webpack 默认处理不了。需要调用 loader 加载器才可以正常打包,否则会报错!

loader加载器可以协助 webpack 打包处理特定的文件模块,比如:

  • less-loader 可以打包处理 .less 相关的文件
  • sass-loader 可以打包处理 .scss 相关的文件
  • url-loader 可以打包处理 css 中与 url 路径相关的文件

项目选择loader时:按需选择

 

打包处理 CSS 文件


处理.CSS文件

 

  • 安装处理.css文件的loader

    npm i style-loader css-loader -D
    
  • webpack.config.jsmodule => rules中,添加loader规则

    // webpack.config.js
    
    // ...
    module.exports = {
        // ...
         module: { // 所有第三方文件模块的匹配规则 
             rules: [ // 多个规则逗号分割
                 // test:匹配的文件类型; use:表示对应要调用的 loader
                 { test: /\.css$/, use: ['style-loader', 'css-loader'] }
             ]
         }
    }
    

    注意

    • use 数组中指定的 loader 顺序是固定的
    • 多个 loader 的调用顺序是:从后往前调用

 

打包处理 LESS 文件


处理.less文件

 

  • 安装处理.less文件的loader

    npm i less-loader less -D
    
    
  • webpack.config.jsmodule => rules中,添加loader规则

    // webpack.config.js
    
    // ...
    module.exports = {
        // ...
         module: { // 所有第三方文件模块的匹配规则 
             rules: [ // 多个规则逗号分割
                 // test:匹配的文件类型; use:表示对应要调用的 loader
                 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
             ]
         }
    }
    
    

 

打包处理 SCSS 文件


处理.scss文件

 

  • 安装处理.scss文件的loader

    npm i sass-loader node-sass -D
    
    
  • webpack.config.jsmodule => rules中,添加loader规则

    // webpack.config.js
    
    // ...
    module.exports = {
        // ...
         module: { // 所有第三方文件模块的匹配规则 
             rules: [ // 多个规则逗号分割
                 // test:匹配的文件类型; use:表示对应要调用的 loader
                 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
             ]
         }
    }
    
    

 

处理 CSS 兼容前缀


处理css的兼容性问题,通过自动添加兼容后缀的方式

 

  • 安装postcss-loader加载器和autoprefixer自动添加前缀插件

    npm i postcss-loader autoprefixer -D
    
    
  • 在项目根目录创建postCSS的配置文件:postcss.config.js

    // postcss.config.js
    
    const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
        module.exports = {
        	plugins: [ autoprefixer ] // 挂载插件
        }
    }
    
    
  • webpack.config.jsmodule => rules中,修改cssloader规则

    // webpack.config.js
    
    // ...
    module.exports = {
        // ...
         module: { // 所有第三方文件模块的匹配规则 
             rules: [ // 多个规则逗号分割
                 // test:匹配的文件类型; use:表示对应要调用的 loader
                 { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
             ]
         }
    }
    
    

 

处理样式表中图片和字体文件


打包样式表中的图片字体文件

 

  • 安装处理路径和文件的loader

    npm i url-loader file-loader -D
    
    
  • webpack.config.jsmodule => rules中,添加loader规则

    // webpack.config.js
    
    // ...
    module.exports = {
        // ...
         module: { // 所有第三方文件模块的匹配规则 
             rules: [ // 多个规则逗号分割
                 // test:匹配的文件类型; use:表示对应要调用的 loader
                 { 
                     test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
                     use: 'url-loader?limit=16940' // ?limit=16940 参数项可不写
                 }
             ]
         }
    }
    
    

    limit:用来指定图片的大小,单位是字节(byte),只有小于limit大小的图片,才会被转为base64图片

 

处理 JS 高级语法


ES5后的语法支持并不是很好,所以我们可以通过babel插件去处理.js文件,转换语法

 

  • 安装babel转换器相关的包

    npm i babel-loader @babel/core @babel/runtime -D
    
    
  • 安装babel语法插件相关的包

    npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D
    
    
  • 在根目录中创建babel配置文件babel.config.js

    // babel.config.js
    
    module.exports = {
         presets: [ '@babel/preset-env' ],
         plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
     }
    
    
  • webpack.config.jsmodule => rules中,修改cssloader规则

    // webpack.config.js
    
    // ...
    module.exports = {
        // ...
         module: { // 所有第三方文件模块的匹配规则 
             rules: [ // 多个规则逗号分割
                 // test:匹配的文件类型; use:表示对应要调用的 loader
                 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
                 // exclude 为排除项,表示 babel-loader 不需要处理 node_modules 中的 js 文件
             ]
         }
    }
    
    

 

 

下一篇: ES6 - 模块化