首页 > 代码库 > webpack使用

webpack使用

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(),只要最后以对象形式输出配置即可。

具体配置信息如下:

devtoolsource-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值,和文件内容相关)

loaderswebpack将每个资源文件当作一个模块,但是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;

 

webpack使用