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引入