标签Webpack

Webpack学习

Webpack的命令及操作

  1. 首先安装webpack
    Npm install webpack –save-dev

  2. 使用webpack可以打包文件,基本打包方法为:
    webpack hello.js hello.bundle.js
    把hello.js打包为hello.bundle.js

  3. 把相关文件引入到hello.js中,再次打包:
    require(‘./world.js’)
    require(‘./style.css’)

    如果引入了css样式文件,需要安装css-loader,需要把样式也添加到页面当中,需要引入style-loader
    npm install css-loader style-loader –save-dev
    修改require为require(‘style-loader!css-loader!./style.css’)

    或者在打包命令中直接输入
    webpack hello.js hello.boudle.js –module-bind ‘css=style-loader!css-loader’

  4. 自动更新,热加载
    在命令后面添加 –watch 即可实现文件修改后自动编译

  5. webpack的配置文件

module.exports = {
    entry:’./src/script/main.js’,               //需要打包的主文件
    output:{
           path:’./dist/js’,                             //输出路径
           filename:’boudle.js’          //输出文件
    }
}

如果需要定义打包过程的参数,可在npm的package.json文件的script标签中指定,如:
“webpack”:”webpack –config webpack.config.js –progress –display-modules –colors –display-reason” //指定配置文件,看到打包过程,看到打包模块,字是彩色的,打包原因
然后运行npm run webpack 即可。

Entry可以为一个单独的文件或者一个数组,或者对象。
对应的output的filename即可为一个固定文件名或者传入[name],[hash],[chunkhash]

  1. html-webpack-plugin 插件
    (1) 在webpack的配置文件中引入插件;
    var htmlWebpackPlugin = require(‘html-webpack-plugin’);
    (2) 加入plugin参数,内容为:
Plugins:[
    New htmlWebpackPlugin({
        filename:’index-[hash].html’,           //自定义名称
            template: ‘index.html’,              //自定义模板
            inject: ‘head’,                      //自定义存放地方head,body,true,false
            minify: {                            //压缩代码
                removeComments: true,          //删除注释
                collapseWhitespace: true         //删除空格
            }
    })
]