webpack使用

Posted 2020-09-16 开发的点点滴滴

Webpack是一个现代js应用的模块打包机。如果一个文件依赖另一个文件，webpack认为这就存在一个依赖关系。不管另一个文件是什么内容，image，css或js都被当作一个模块。Webpack从entry points开始构建依赖关系图，将应用所需要的所有模块经过处理成浏览器可识别的格式，再打包成一批（个）文件，将来发送给浏览器。

使用步骤：

1.全局安装webpack

　　npm install -g webpack

如果没有package.json，使用CLI创建：npm init

2.项目根目录安装webpack

　　npm install --save-dev webpack

3.配置webpack.config.js文件，运行webpack命令时不用再输入参数

4.CLI：在项目目录运行webpack

　　Node API：webpack({config,callback);

webpack的配置文件webpack.config.js

如果该文件存在，只需要执行CLI命令：$webpack，webpack就会自动读取配置，并输出打包的文件。配置文件是以js文件的形式代替命令行形式参数，是符合commonjs规范的node模块，里面可以有function和require()，只要最后以对象形式输出配置即可。

具体配置信息如下：

devtool：source-map.生成何种类型的source map，方便打包后的调试。

entry： webpack从哪里开始构建整个依赖关系。动态的模块不能是entry point。一般一个html页面一个entry point。如果有多个entry point，可以采用对象形式定义。不支持通配符配置。如果确实有需要，用如下sinppet，然后将entries传入webpack.config中

    var glob = require("glob");
    // ...
    entry: glob.sync("./src/scripts/*.js")

output：打包后输出的路径（path）和输出的文件名（filename）。可以有多个entry point，但只能有一个output。

如果是多entry，filename需要使用替换保证每个输出文件的名字唯一：

　　[name] is replaced by the name of the chunk.

　　[hash] is replaced by the hash of the compilation.（compilation对象的hash值，和webpack的compiler环境相关）

　　[chunkhash] is replaced by the hash of the chunk.（具体模块的hash值，和文件内容相关）

loaders：webpack将每个资源文件当作一个模块，但是webpack只能处理js。通过loaders将其他格式的资源文件转换成模块后（比如将JSX语言转换成js、将offeescript转换成js）加入依赖关系中，最后打包输出。需要单独安装包并且在webpack.config.js下的modules关键字下进行配置loaders后才能使用。 loders下的字段：

　　test：确定哪些文件将被加载器处理；

　　user：使用哪个加载器，”-loader”后缀不能省略；

　　include/exclude：必须处理或屏蔽不需要处理的文件（文件夹）（可选）；

　　options：当前loader需要的特殊配置（可选），如babel-loader的.babelrc配置文件里的信息。webpack2.5之前为query

plugins：扩展Webpack功能，会在整个构建过程中生效，执行相关的任务。需要通过require()引入并将插件实例添加到plugins数组中。

resovle：通过别名、扩展名、根路径或备用目录等属性决定webpack如何解析require()的模块。

　　resolve.alias：用别的路径或模块替代。把requirejs项目改为webpack项目时可以利用此属性。

　　resolve.extensions：通过扩展名组成的数组解析require()的模块文件。比如加载一个coffeeScript文件，需要增加’.coffee’扩展名。若修改后必须增加空字符串为第一个元素。

常用命令：webpack  –watch改动代码后自动打包 

自动刷新页面显示修改后的效果

使用webpack-dev-server模块构建本地服务器：

　　npm install --save-dev webpack-dev-server

安装完毕之后运行$webpack-dev-server --open

如果报命令不识别的错误，可在package.json的script字段添加（"start": "webpack-dev-server"），运行$npm start命令。

const webpack = require(‘webpack‘);       //访问内置插件
const path = require(‘path‘);
var htmlWebpackPlugin = require(‘html-webpack-plugin‘);//installed via npm

const config = {
        devtool: "cheap-eval-source-map",    //生成何种类型的源代码映射文件，方便调试打包后的代码
        entry: {                //webpack打包的切入点，一般一个页面的业务代码定义一个entry point
            home: ["./footer.js", "./home.js"],    //若为[string]，则将多个相互独立的文件及其依赖打包成一个chunk，key为输出name
            about: "./about.js",
            contact: "./contact.js"
        },
        output: {                   //输出配置
            path: path.resolve(__dirname, ‘dist‘),       //打包后输出的路径
            filename: ‘[name].[chunkhash:8].js‘,      //打包后输出的文件名,多个entry需要替换
            publicPath: ‘/assets/‘    //供插件在生产模式下更新内嵌到css、html文件里的相对路径url值
        },
        module: {       //    webpack2.0的字段名做了些修改
            rules: [        //每条rule定义对应的module如何生成，是loaders的alias
                {
                    test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式
                    exclude: /(node_modules|bower_components)/,
                    use: [　　//使用到的loader及其配置
                        {
                            loader: ‘babel-loader‘,//使用的加载器名称，-loader后缀不能省略；也可通过?query设置参数
                            options: {      //为当前loader设置的参数,对于babel可以提取出单独放在.babelrc文件中;
                                presets: [‘react‘, ‘es2015‘],
                                plugins: [require(‘react-html-attrs‘)]
                            }
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    exclude: /(node_modules)/,    //手动添加必须处理(include)或屏蔽不需要处理的文件（文件夹）
                    use: [//使用多个loader处理同一源文件，从右往左顺序处理
                        //css-loader将css文件当作一个模块引入当前模块中，类名相同样式也不会冲突；style-loader将当前模块中的样式引入页面的style元素中
                        {
                            loader: ‘style-loader‘
                        },
                        {
                            loader: ‘css-loader‘,
                            options: {
                                importLoaders: 1
                            }
                        },
                        {
                            loader: ‘less-loader‘,
                            options: {
                                noIeCompat: true
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|jpg)$/,      //使用 url-loader引入图片，小于8kb的直接转为base64
                    loader: ‘url-loader?limit=8192‘
                }
            ]
        },
        plugins: [                        //添加插件实例
            new htmlWebpackPlugin({     //依据模板，生成最终的Html文件，该文件自动引用了打包后的JS文件，不用手动一个一个修改src
                filename: ‘home.index‘,         //输出文件的名字
                template: ‘./src/index.html‘,//使用的模版
                title: ‘this is home page‘,//传入模版的参数，在模版中可以通过<%=htmlWebpackPlugin.options.title%>获取该值
                inject: ‘body‘,             //插入script的位置
                chunks: [‘common‘],         //模版页面会包含的模块
                excludeChunks: [‘a‘, ‘b‘]   //排除引入的模块
            }),
            new webpack.optimize.CommonsChunkPlugin(‘common.js‘), //把所有入口节点的公共代码提取出来,生成一个common.js进行复用
        ],
        watch: true,//监听源文件的修改，之后recompile，但不刷新页面。为了提高性能，需要将safe write关闭，用save file触发。
        watchOptions: {
            aggregateTimeout: 300,//从修改文件开始到rebuilding的延迟时间，将多个改变积累到一起
            poll: 1000,        //Check for changes every second
            ignored: /node_modules/    //排除监听的目录
        }
        devServer: {    //构建本地服务器实时提供服务并刷新，编译后的文件保存在内存中，所以比较快。
            contentBase: "./",//本地服务器所提供服务的内容来源
            port: 8080,    //监听端口，和编辑器的端口不一样
            colors: true,//终端中输出结果为彩色
            historyApiFallback: true,//所有的跳转将指向index.html
            inline: true    //会输出错误
        }
    }
;
module.exports = config;