浅谈webpack，实现从零到一

时间  2019-11-06
标签 浅谈 webpack 实现 繁體版
原文   原文链接

webpack官网：webpack.docschina.org/javascript

首先什么是webpack ?

  1. webpack是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个bundle。
  2. webpack 自己是基于node.js开发的
  3. 从 webpack v4.0.0开始，能够不用引入一个配置文件（零配置文件），然而webpack仍然仍是高度可配置的。

下面咱们分几个步骤，来详细看一下webpack

1. 安装webpack

咱们以webpack第四代版本为主css

为了防止全局安装webpack的版本冲突，咱们在项目开发的时候基本上以安装在本地项目中为主；html

//由于webpack是基于node.js开发的，因此安装webapck以前，咱们必须安装node,而后npm会自动安装，而后基于npm命令安装webpack
$ npm init -y
$ npm install webpack webpack-cli --save-dev
OR
$ yarn add webpack webpack-cli -D
复制代码

2. webpack的基础使用

初步体验（零配置）

/* * 默认会打包SRC目录中的JS文件（入口默认index.js） * 打包完成的目录默认是DIST/MAIN.JS * * npx:http://www.ruanyifeng.com/blog/2019/02/npx.html * 默认执行node_modules/bin/webpack.cmd文件 * webpack默认支持CommonJS和ES6 Module的模块规范，依此进行依赖打包 */
$ npx webpack
复制代码

npx:从npm5.2版本后，提供了一个命令：npx，基于这个命令咱们能够执行安装在本地的模块（基于npm安装，能够装在全局或者本地，装在全局的能够基于命令执行，而本地不能基于命令执行，固然能够配置）java

$npx webpack基于npx执行了webpack，而这个命令就是实现打包部署的node

自定义基础配置

虽然webpack第四代支持零配置，固然咱们也能够根据需求来本身定义基础配置jquery

首先咱们建立一个名为webpack.config.js 或者 webpackfile.js的文件webpack

//由于须要用node中的path内置模块，因此要导入
let path = require('path');
module.exports = {
    //=>打包模式 开发环境development 生产环境production
    mode: 'production',
    //=>入口
    entry: './src/index.js',
    //=>输出
    output: {
        //=>输出文件的文件名
        filename: 'bundle.min.[hash].js',
        //=>输出目录的"绝对路径"
        path: path.resolve(__dirname, 'dist')
    }
}
复制代码

自定义配置文件名

  • $ npx webpack --config webpack.config.development.js
  • 可在package.json中配置可执行的脚本命令（区分开发环境）
//package.json
"scripts": {
    "serve": "webpack --config webpack.config.development.js",
    "build": "webpack --config webpack.config.production.js"
},
复制代码

3. webpack-dev-server

webpack.js.org/configurati…git

  • 安装：$ yarn add webpack-dev-server -D
  • 基础配置
/* webpack.config.js */
//=>配置DEV-SERVER
devServer: {
    //=>端口
    port: 3000,
    //=>显示编译进度
    progress: true,
    //=>指定访问资源目录
    contentBase: './dist',
    //=>自动打开浏览器
    open: true
}
复制代码
/* package.json */
"scripts": {
    "serve": "webpack-dev-server",
    "build": "webpack"
}
复制代码
  • $ npm run serve
  • $ npx webpack-dev-server

代码更改后，会自动从新编译，而后自动刷新页面github

4. html-webpack-plugin

www.webpackjs.com/plugins/htm…web

  • 安装：$ yarn add html-webpack-plugin -D
  • 在webpack.config.js中使用
//先导入这个插件
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...,
    //=>在webpack中使用插件
    plugins: [
        //由于导入的插件是一个类，因此咱们用的时候须要new 一下
        new HtmlWebpackPlugin({
            //=>指定本身的模板
            template: './src/index.html',
            //=>输出的文件名
            filename: 'index.html',
            //=>给引入的文件设置HASH戳（清除缓存的），也能够在output中设置 filename: 'bundle.[hash].js' 来生成不一样的文件
            hash: true,
            //=>控制是否以及以何种方式最小化输出 
            //=>https://github.com/kangax/html-minifier
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeAttributeQuotes: true,
                removeEmptyAttributes: true
            }
        })
    ]
}
复制代码

5. webpack中的加载器loader：处理样式的

  • 安装：$ yarn add css-loader style-loader less less-loader autoprefixer postcss-loader ... -D
  • 使用
module.exports = {
    //=>配置模块加载器LOADER
    module: {
        //=>模块规则：使用加载器（默认从右向左执行，从下向上）
        rules: [{
            test: /\.(css|less)$/, //=>基于正则表达式匹配哪些模块须要处理
            use: [
                "style-loader", //=>把CSS插入到HEAD中
                "css-loader", //=>编译解析@import/URL()这种语法
                "postcss-loader", //=>设置前缀
                {
                    loader: "less-loader",
                    options: {
                        //=>加载器额外的配置
                    }
                }
            ]
        }]
    }
}
复制代码

postcss.config.js

//这个文件须要配合postcss-loader使用
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};
复制代码
//package.json
"browserslist": [
    "> 1%",
    "last 2 versions"
]
复制代码

6. mini-css-extract-plugin 抽离CSS内容

上面只是处理css，放到结构中，这个是单独把css隔离出来并压缩

www.npmjs.com/package/min…

  • 安装 $ yarn add mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
let MiniCssExtractPlugin = require('mini-css-extract-plugin'),
    OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'),
    UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    //=>设置优化项
    optimization: {
        //=>设置压缩方式
        minimizer: [
            //=>压缩CSS（可是必须指定JS的压缩方式）
            new OptimizeCssAssetsWebpackPlugin(),
            //=>压缩JS
            new UglifyjsWebpackPlugin({
                cache: true, //=>是否使用缓存
                parallel: true, //=>是不是并发编译
                sourceMap: true, //=>启动源码映射（方便调试）
            })
        ]
    },
    plugins: [
        //=>使用插件
        new MiniCssExtractPlugin({
            //=>设置编译后的文件名字
            filename: 'main.css'
        })
    ],
    module: {
        rules: [{
            test: /\.(css|less)$/,
            use: [
                // "style-loader",
                //=>使用插件中的LOADER代替STYLE方式
                MiniCssExtractPlugin.loader,
                "css-loader",
                "postcss-loader",
                "less-loader"
            ]
        }]
    }
}
复制代码

7. 基于babel实现ES6的转换和ESLint语法检测

在第六步中，须要对于ES6中的一些语法进行处理!

babeljs.io/

eslint.org/

  • 安装 $ yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime -D
  • 安装 $ yarn add @babel/runtime @babel/polyfill
  • 安装 $ yarn add eslint eslint-loader -D
module.exports = {
    ...,
    module: {
        rules: [...,{
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    //=>转换的语法预设（ES6->ES5）
                    presets: [
                        "@babel/preset-env"
                    ],
                    //=>基于插件处理ES6/ES7中CLASS的特殊语法
                    plugins: [
                        ["@babel/plugin-proposal-decorators", {
                            "legacy": true
                        }],
                        ["@babel/plugin-proposal-class-properties", {
                            "loose": true
                        }],
                        "@babel/plugin-transform-runtime"
                    ]
                }
            }], //=>, "eslint-loader"
            //=>设置编译时忽略的文件和指定编译目录
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
        }]
    }
}
复制代码

8. 暴露全局loader

  • $ yarn add expose-loader -D
  • 前置加载器、后置加载器、普通加载器...

好比想直接使用jquery或者$

//=>内联加载器
import jquery from 'expose-loader?$!jquery';
console.log(window.$);

{
    //=>只要引入JQUERY就在全局注入$
    test: require.resolve('jquery'),
    use: ['expose-loader?$']
}
复制代码
let webpack = require('webpack');
module.exports = {
    plugins: [
        //=>在每一个模块中都注入$
        new webpack.ProvidePlugin({
            '$': 'jquery'
        })
    ],
}

//=>页面中
console.log($);//这样就不会报错了
复制代码

9. webpack中图片的处理和分目录分发

使用图片有三种方式

  • 在js中建立img
  • 在css中设置背景图片
  • 在html中写死

安装 $ yarn add file-loader url-loader html-withimg-loader -D

module.exports = {
    ...,
    module: {
        //=>模块规则：使用加载器（默认从右向左执行）
        rules: [..., {
            //还有不少图片格式。。。
            test: /\.(png|jpg|gif)$/i,
            use: [{
                //=>把指定大小内的图片BASE64
                loader: 'url-loader',
                options: {
                    limit: 200 * 1024,
                    outputPath:'/images'
                }
            }],
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
        }, {
            test: /\.html$/,
            use: ['html-withimg-loader']
        }]
    }
}
复制代码
  • 最后实现文件分目录发布
module.exports = {
    output: {
        //=>配置引用前缀（全部资源前加这个地址）
        publicPath: './'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/main.css'
        })
    ],
    module: {
        //=>模块规则：使用加载器（默认从右向左执行）
        rules: [...,{
            test: /\.(png|jpg|gif)$/i,
            use: [{
                options: {
                    outputPath: 'images'
                }
            }]
        }]
    }
}
复制代码

一个比较完整的webpack配置

/* 在这个文件中设置咱们自定义的打包规则 1. 全部的规则都写在module.exports={}中 */
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin'), //把css单独分离出来
    OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'), //压缩css
    UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); //压缩js
let webpack = require('webpack');
//导入进来的插件都是一个类 new HtmlWebpackPlugin({});

module.exports = {
    //配置优化规则
    optimization: {
        //设置压缩方式
        minimizer: [
            //压缩css (产生问题：JS压缩不在执行本身默认的压缩方式了，也走的是这个插件，从而致使没法压缩，因此必须设置JS的压缩方式)
            new OptimizeCssAssetsWebpackPlugin(),
            //压缩js
            new UglifyjsWebpackPlugin({
                cache: true, //是否使用缓存
                parallel: true, //是不是兵法编译
                sourceMap: true, //启动源码映射（方便调试）
            })
        ]
    },
    //配置环境 开发环境development 生产环境production(默认)
    mode: 'production',
    //入口
    entry: ['@babel/polyfill', './src/index-my.js'],
    //出口
    output: {
        //输出文件的文件名
        //bundle.min.[hash].js 让每一次生成的文件名都带着hash值
        filename: 'bundle.min.js',
        // filename: 'bundle.min.[hash].js',
        //输出的目录必须是绝对路径,__dirname当前目录
        path: path.resolve(__dirname, 'dist'),
        publicPath: './' //给编译后引入资源地址前面设置的前缀
    },
    //关于webpack-dev-server的一些配置 执行命令：webpack-dev-server --config xxx.js (特色：服务启动后，默认是不关闭的，当咱们修改src中的源文件，他会自动进行编译，而后自动刷新浏览器,相似于vscode中的Live Server插件，实时刷新)
    devServer: {
        //建立服务指定的端口号
        port: 3000,
        //显示打包编译进度
        progress: true,
        //指定当前服务处理资源的目录
        contentBase: './dist',
        //编译完成后，自动打开浏览器
        open: true
    },
    //使用插件 (数组)
    plugins: [
        new HtmlWebpackPlugin({
            //不指定模版会按照默认模版建立一个html页面，固然真实项目中通常都是把本身写好的html进行编译
            template: './src/index.html',
            //输出的文件名
            filename: 'index.html',
            //让咱们引入js后面加上hash戳（清除缓存）,可是真实项目中咱们通常都是每一次编译生成不一样的js文件引入
            hash: true,
            //控制压缩
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeAttributeQuotes: true,
                removeEmptyAttributes: true
            }
        }),
        new MiniCssExtractPlugin({
            //指定输出的文件名
            filename: 'main.min.css'
        }),
        //在每一个模块中都注入$
        new webpack.ProvidePlugin({
            '$': 'jquery'
        }),
    ],
    //使用加载器loader处理规则
    module: {
        rules: [{
            //基于正则匹配处理哪些文件
            test: /\.(css|less)$/,
            //使用哪个加载器，控制使用的loader（有顺序的：从右到左执行）
            use: [
                // "style-loader", //把编译好的css插入到页面的head中（内嵌式）
                MiniCssExtractPlugin.loader, //使用插件中的loader代替style方式
                "css-loader", //编译解析@import/URL()这种语法
                // "postcss-loader",//设置前缀的加载器
                {
                    loader: "postcss-loader",
                    options: {
                        ident: 'postcss',
                        plugins: [
                            require('autoprefixer')
                        ]
                    }
                },
                {
                    loader: "less-loader", //编译less
                    options: {
                        //加载额外的配置
                    }
                }
            ]
        }, {
            test: /\.js$/,
            //处理编译JS的loader
            use: [{
                loader: 'babel-loader',
                options: {
                    //转换的语法预设（ES6->ES5)
                    presets: [
                        "@babel/preset-env"
                    ],
                    //=>基于插件处理ES6/ES7中CLASS的特殊语法
                    plugins: [
                        ["@babel/plugin-proposal-decorators", {
                            "legacy": true //处理装饰器
                        }],
                        ["@babel/plugin-proposal-class-properties", {
                            "loose": true //处理属性
                        }],
                        "@babel/plugin-transform-runtime"
                    ]
                }
            }],
            //设置编译时忽略的文件和指定编译目录
            include: path.resolve(__dirname, 'src'), //编译的
            exclude: /node_modules/ //忽略的·
        }, {
            //图片处理
            test: /\.(png|jpg|gif|jpeg|ico|webp|bpm)$/i,
            use: [{
                loader: 'url-loader',
                options: {
                    //只要图片小于200KB,在处理的时候直接base64
                    limit: 2 * 1024,
                    //控制打包后图片所在的目录
                    outputPath: 'images'
                }
            }]
        }, {
            //处理HTML文件中导入的img文件
            test: /\.(html|htm|xml)$/i,
            use: ['html-withimg-loader']
        }]
    }
}
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程