webpack学习打包笔记

webpack

命令和安装

webpack不支持css的打包，打包css文件需要安装css-loader，和style-loader

并且使用之前需要指定相应的loader

css-loader!//处理css文件

style-loader!//新建一个script标签将css的内容插入这个标签里面

webpack ./hello.js -o hello.blund.js --mode development --progress --display-modules -whatch //查看过程、查看打包模块、自动打包

建立项目的webpack文件

webpack.config.js不需要指定任何参数直接读取该文件中的配置内容

webpack文件：

module.exports={
   
    entry: './src/script/main.js',//入口文件
    output:{
   
        path:  __dirname+'/dist/js',//输出文件
        filename: 'bundle.js'//打包后的文件名
    }
}

entry参数

webpack打包入口指示

1. 指定一个入口文件
2. 指定一个数组，解决两个平行的不相依赖的文件
3. 指定两个或多个page，如果只有一个filename则会报错

input参数

filename不需要指定路径，根据chunck有多个，可以用占位符来防止文件进行覆盖

1. [name]
2. [hash]//版本号
3. [chunkhash]

相当于一次性打了两次包

自动化生成项目中的html页面

依赖包：html-webpack-plugin

在webpack.conifg.js中

var htmlWebpackPlugin =require('html-webpack-plugin');//引入插件并使用

2.2+以上版本 plugins要写在module.exports.module外面

PS：module.exports有一个默认的context属性，参数默认为根目录

plugins:[
        new htmlWebpackPlugin({
   
            filename: 'index.html',//指定文件名
            template: 'index.html',//指定模板文件
            inject: 'head',//将脚本放在body还是head
            title: 'wabpack is good',//模板的html文件中：<title><%= htmlWebpackPlugin.options.title %></title>
            date: new Date(),//模板的html的文件中： <%= htmlWebpackPlugin.options.date%>
            minify:{
   
                removeComments:true,