关于Webpack详述系列文章 （第一篇）

时间  2019-12-08
标签 关于 webpack 详述 系列 文章 一篇 繁體版
原文   原文链接

WebPack官网地址（https://webpack-china.org/）

1. 什么是WebPack

WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。css

构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括以下内容。html

  • 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  • 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
  • 代码分割：提取多个页面的公共代码、提取首屏不须要执行部分的代码让其异步加载。
  • 模块合并：在采用模块化的项目里会有不少个模块和文件，须要构建功能把模块分类合并成一个文件。
  • 自动刷新：监听本地源代码的变化，自动从新构建、刷新浏览器。
  • 代码校验：在代码被提交到仓库前须要校验代码是否符合规范，以及单元测试是否经过。
  • 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

构建实际上是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了咱们的生产力。前端

2. 初始化项目

mkdir webpack-start
cd webpack-start
npm init

3. 快速上手

3.1 webpack核心概念

  • Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
  • Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出全部依赖的模块。
  • Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
  • Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
  • Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或作你想要的事情。
  • Output：输出结果，在 Webpack 通过一系列处理并得出最终想要的代码后输出结果。

==>  Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的全部 Module。 每找到一个 Module， 就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其全部依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把全部 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。node

3.2 配置webpack

npm install webpack webpack-cli -D
  • 建立src
  • 建立dist
    • 建立index.html
  • 配置文件webpack.config.js
  • 配置文件webpack.config.js
    • entry：配置入口文件的地址
    • output：配置出口文件的地址
    • module：配置模块,主要用来配置不一样文件的加载器
    • plugins：配置插件
    • devServer：配置开发服务器

4. 配置开发服务器

npm i webpack-dev-server –D
  • contentBase 配置开发服务运行时的文件根目录
  • host：开发服务器监听的主机地址
  • compress 开发服务器是否启动gzip等压缩
  • port：开发服务器监听的端口
devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        host:'localhost',
        compress:true,
        port:8080
}
"scripts": {
    "build": "webpack --mode development",
    "dev": "webpack-dev-server --open --mode development "
}

5. 支持加载css文件

5.1 什么是Loader

经过使用不一样的Loader，Webpack能够要把不一样的文件都转成JS文件,好比CSS、ES6/七、JSX等react

  • test：匹配处理文件的扩展名的正则表达式
  • use：loader名称，就是你要使用模块的名称
  • include/exclude:手动指定必须处理的文件夹或屏蔽不须要处理的文件夹
  • query：为loaders提供额外的设置选项

loader三种写法jquery

  • use
  • loader
  • use+loader

5.2 css-loader

npm i style-loader css-loader -D

配置加载器webpack

module: {
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            }
        ]
   },

6. 自动产出html

咱们但愿自动能产出HTML文件，并在里面引入产出后的资源web

npm i html-webpack-plugin -D
  • minify 是对html文件进行压缩，removeAttrubuteQuotes是去掉属性的双引号
  • hash 引入产出资源的时候加上哈希避免缓存
  • template 模版路径
  plugins: [
        new HtmlWebpackPlugin({
       minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        template: './src/index.html',
        filename:'index.html'
   })]

7. 支持图片

7.1 手动添加图片

npm i file-loader url-loader -D
  • file-loader 解决CSS等文件中的引入图片路径问题
  • url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候仍是使用file-loader 进行拷贝
let logo=require('./images/logo.png');
let img=new Image();
img.src=logo;
document.body.appendChild(img);
{
    test:/\.(jpg|png|gif|svg)$/,
    use:'url-loader',
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
  }

7.2 在CSS中引入图片

还能够在CSS文件中引入图片正则表达式

.img-bg{
    background: url(./images/logo.png);
    width:173px;
    height:66px;
}

8. 分离CSS

由于CSS的下载和JS能够并行,当一个HTML文件很大的时候，咱们能够把CSS单独提取出来加载npm

npm install --save-dev extract-text-webpack-plugin@next
            {
                test:/\.css$/,
               use: ExtractTextWebpackPlugin.extract({
                    use:'css-loader'
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },

   plugins: [
        new ExtractTextWebpackPlugin('css/index.css'),

处理图片路径问题

const PUBLIC_PATH='/';

output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath:PUBLIC_PATH
    },

指定打包后的图片位置

use: [
    {
     loader: 'url-loader',
     options: {
       limit: 1024,
      outputPath:'images/'
     }
    }
],

在HTML中使用图片

npm i html-withimg-loader -D
<div class="img-container "><img src="./images/logo.png" alt="logo.png"></div>
  {
    test:/\.(html|html)$/,
    use:'html-withimg-loader',
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
 }

9. 编译less 和 sass

npm i less less-loader -D
npm i node-saas sass-loader -D
@color:orange;
.less-container{
    border:1px solid @color;
}

$color:green;
.sass-container{
    border:1px solid $color;
}
const cssExtract=new ExtractTextWebpackPlugin('css.css');
const lessExtract=new ExtractTextWebpackPlugin('less.css');
const sassExtract=new ExtractTextWebpackPlugin('sass.css');

 {
                test:/\.less$/,
                use: lessExtract.extract({
                    use:['css-loader','less-loader']
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test:/\.scss$/,
                use: sassExtract.extract({
                    use:['css-loader','sass-loader']
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },

10. 处理CSS3属性前缀

为了浏览器的兼容性，有时候咱们必须加入-webkit,-ms,-o,-moz这些前缀

  • Trident内核：主要表明为IE浏览器, 前缀为-ms
  • Gecko内核：主要表明为Firefox, 前缀为-moz
  • Presto内核：主要表明为Opera, 前缀为-o
  • Webkit内核：产要表明为Chrome和Safari, 前缀为-webkit
npm i postcss-loader autoprefixer -D

postcss.config.js

module.exports={
    plugins:[require('autoprefixer')]
}
.circle {
    transform: translateX(100px);
}
{
                test:/\.css$/,
                use: cssExtract.extract({
                  use:['css-loader','postcss-loader']
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },

11. 转义ES6/ES7/JSX

Babel实际上是一个编译JavaScript的平台,能够把ES6/ES7,React的JSX转义为ES5

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
{
        test:/\.jsx?$/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ["env","stage-0","react"]
            }
        },
        include:path.join(__dirname,'./src'),
        exclude:/node_modules/
        },

12. 如何调试打包后的代码

webapck经过配置能够自动给咱们source maps文件，map文件是一种对应编译文件和源文件的方法

  • source-map 把映射文件生成到单独的文件，最完整最慢
  • cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Map
  • eval-source-map 使用eval打包源文件模块,在同一个文件中生成完整sourcemap
  • cheap-module-eval-source-map sourcemap和打包后的JS同行显示，没有映射列
devtool:'eval-source-map'

13.打包第三方类库

13.1 直接引入

import _ from 'lodash';
alert(_.join(['a','b','c'],'@'));

13.2 插件引入

 new webpack.ProvidePlugin({
            _:'lodash'
 })

14. watch 

当代码发生修改后能够自动从新编译

new webpack.BannerPlugin('珠峰培训'),

 watch: true,
    watchOptions: {
        ignored: /node_modules/, //忽略不用监听变动的目录
        aggregateTimeout: 500, //防止重复保存频繁从新编译,500毫米内重复保存不打包
        poll:1000 //每秒询问的文件变动的次数
    },

15. 拷贝静态文件 

有时项目中没有引用的文件也须要打包到目标目录

npm i copy-webpack-plugin -D
 new CopyWebpackPlugin([{
            from: path.join(__dirname,'public'),//静态资源目录源地址
            to:'./public' //目标地址，相对于output的path目录
        }]),

16. 打包前先清空输出目录

npm i  clean-webpack-plugin -D
new cleanWebpaclPlugin(path.join(__dirname,'dist'))

17. 压缩JS

压缩JS可让输出的JS文件体积更小、加载更快、流量更省，还有混淆代码的加密功能

npm i uglifyjs-webpack-plugin -D
plugins: [
        new UglifyjsWebpackPlugin(),


]

18. 压缩CSS

webpack能够消除未使用的CSS，好比bootstrap中那些未使用的样式

npm i -D purifycss-webpack purify-css
npm i bootstrap -S
{
                test:/\.css$/,
                use: cssExtract.extract({
                    use: [{
                         loader: 'css-loader',
                      options:{minimize:true}
                    },'postcss-loader']
                }),
            },
 new PurifyCSSPlugin({
             //purifycss根据这个路径配置遍历你的HTML文件，查找你使用的CSS
            paths:glob.sync(path.join(__dirname,'src/*.html'))
 }),

19. 服务器代理 

若是你有单独的后端开发服务器 API，而且但愿在同域名下发送 API 请求 ，那么代理某些 URL 会颇有用。

//请求到 /api/users 如今会被代理到请求 http://localhost:9000/api/users。
        proxy: {
            "/api": "http://localhost:9000",
        }
 proxy: {
            "/api": {
                target: "http://localhost:9000",
                pathRewrite: {"^/api":""}
            }
}

20. resolve解析

20.1 extensions

指定extension以后能够不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

 resolve: {
    //自动补全后缀，注意第一个必须是空字符串,后缀必定以点开头
   extensions: ["",".js",".css",".json"],
 },

20.2 alias

配置别名能够加快webpack查找模块的速度

  • 每当引入jquery模块的时候，它会直接引入jqueryPath,而不须要从node_modules文件夹中按模块的查找规则查找
  • 不须要webpack去解析jquery.js文件
const bootstrap=path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')
resolve: {
        alias: {
            'bootstrap': bootstrap
        }
    },

21. 区分环境变量

许多 library 将经过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的日志记录(log)和测试(test)。其实，当使用 process.env.NODE_ENV === 'production' 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码。咱们能够使用 webpack 内置的 DefinePlugin 为全部的依赖定义这个变量：

npm install cross-env -D
"scripts": {
    "build": "cross-env NODE_ENV=production webpack --mode development",
     "dev": "webpack-dev-server --open --mode development "
  },
 plugins: [
        new webpack.DefinePlugin({
            NODE_ENV:JSON.stringify(process.env.NODE_ENV)
        }),
if (process.env.NODE_ENV == 'development') {
    console.log('这是开发环境');
} else {
    console.log('这是生产环境');
}

22. 暴露全局对象

require("expose-loader?libraryName!./file.js");
require("expose-loader?_!loadash");

let _=require('expose-loader?_!lodash');
{
               test: /^lodash$/,
               loader: "expose?_"
 }
setTimeout(function(){
    console.log(window._);
});

23. 多入口

有时候咱们的页面能够不止一个HTML页面，会有多个页面，因此就须要多入口

entry: {
        index: './src/index.js',
        main:'./src/main.js'
    },
     output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].[hash].js',
            publicPath:PUBLIC_PATH
        },
        new HtmlWebpackPlugin({
                    minify: {
                        removeAttributeQuotes:true
                    },
                    hash: true,
                    template: './src/index.html',
                    chunks:['index'],
                    filename:'index.html'
                }),
                new HtmlWebpackPlugin({
                    minify: {
                        removeAttributeQuotes:true
                    },
                    hash: true,
                    chunks:['main'],
                    template: './src/main.html',
                    filename:'main.html'
                })],

24. externals

若是咱们想引用一个库，可是又不想让webpack打包，而且又不影响咱们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就能够经过配置externals

 const $ = require("jquery");
 const $ = window.jQuery;
 externals: {
      jquery: "jQuery"//若是要在浏览器中运行，那么不用添加什么前缀，默认设置就是global
    },
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程