webpack学习笔记一

1. webpack学习(entry,output,plugins)

安装在web文件夹下
cd web
npm init
npm install webpack --save-dev

打包
webpack hello.js hello.bundle.js
hello.js是打包前的js，hello.bundle.js是打包后的js

如果js引入了css文件，需要安装css的依赖，js中require进行引入各种依赖
npm install css-loader style-loader --save-dev

require('style-loader!css-loader!./style.css')

通过webpack命令行使用style-loader和css-loader
require('./style.css')

webpack hello.js hello.bundle.js --bundle-bind 'css=style-loader!css-loader' --watch
watch可以在文件改变是自动更新

webpack的基本配置(手动创建，没有使用cli命令)
文件结构如下：

手动编写webpack.config.js中内容

 const path = require('path')//引入path依赖
 moudle.exports = {
 entry:'./src/script/main.js',//将main.js中的内容进行打包
 output:{
     path: path.resolve(__dirname,'./dist/js'),//打包后的main.js放到该目录下
     filename:'bundle.js'//打包后的main.js的文件`
 }

const path = require('path');

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        path: path.resolve(__dirname,'./dist/js'),
        filename: '[name]-bundle.js'
    }
}
entry里是一个对象，打包后main.js和a.js会被分别打包为main-bundle.js和main-bundle.js

html-webpack-plugin插件
cnpm install html-webpack-plugin
在webpack.config.js中引用该插件

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        path: path.resolve(__dirname,'./dist/js'),
        filename: '[name]-bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin()
    ]
}

执行webpack命令后，会发现在dist文件夹下生成了index.html页面，该html页面对生成的a-bundle.js和main-bundle.js进行了引用。
如果不想生成新的html，而是在webpack-config下的index.html页面中对打包的js直接进行引用该怎么办尼？
我们可以给new htmlWebpackPlugin（）传参数

new htmlWebpackPlugin({
    template:'index.html'
})

再次执行webpack命令后，会发现dist文件夹下的index.html的内容和webpack-config根目录下的index.html页面的内容一致了

我们发现新生成的index.html页面把放在了dist/js中，我们怎样将其从js文件夹中移除，放在dist文件夹下尼？

将webpack.config.js中的output对象中的代码改为如下所示：

output: {
    path: path.resolve(__dirname,'./dist')
    filename: 'js/[name]-bundle.js'
}
如果项目上线，js的路径需要替换为上线地址，这时可以使用publicPath属性

output: {
    path: path.resolve(__dirname,'./dist'),
    filename: 'js/[name]-bundle.js',
    publicPath: 'https://cnd.com/'
}
这样生成的js都会一个publicPath路径开头

如何对上线的html文件进行压缩尼？可以使用html-webpack-plugin的minify属性

plugins:[
    new htmlWebpackPlugin({
        template:'index.html'，
        minify:{
            removeComments: true,//删除注释
            collapseWhiteSpace: true//删除空格
        }
    })
]

执行webpack命令后，发现生成的index.html页面中的注释和空格都没有了

webpack如何处理多页面应用

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js',
        b: './src/script/b.js',
        c: './src/script/c.js'
    },
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: 'js/[name]-bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            filename:'a.html',
            template:'index.html',
            title:'a.html',
            chunks:['main','a']
        }),
        new htmlWebpackPlugin({
            filename:'b.html',
            template:'index.html',
            title:'b.html',
            chunks:['main','b']
        }),
        new htmlWebpackPlugin({
            filename:'c.html',
            template:'index.html',
            title:'c.html',
            chunks:['main','c']
        })
    ]
}

在plugins对象里，生成了三个html-webpack-plugins的页面，他们都是根据tmeplate模版生成的页面，但是chunks属性可以指定新生成页面引用的js，根据代码可知，a.html引入main.js和a.js， b.html引入main.js和b.js，c.html引入main.js和c.js。

new htmlWebpackPlugin({
    filename:'a.html',
    template:'index.html',
    title:'a.html',
    excludeChunks:['b','c']
}),
使用excludeChunks可以和chunks达到同样的效果，它表示除了b.js和c.js，其它js都将被a.html引入