Webpack基础-1

代码分割

运行

npm run webpack

将css导入到js文件中

require('style-loader!css-loader!./style.css')
//css-loader使webpack能够处理css文件
//style-loader将处理后的css添加到html代码中

module.exports = {
    entry:'./src/main.js',//打包入口路径
    output: {
        path: '', //打包后的输出路径
        filename: '', //打包后的文件名
        publicPath: '',// 上线添加在文件名前的字符
    }
}

entry

整个webpack打包的入口，可以是string、array（平行）、object（key: 'value'）

output 

filename不要指定绝对路径

filename不要写死，如果创建多个‘chunk’，利用占位符[name]、[hash]、[chunkhash]不会覆盖掉之前的

自动生成项目中的html页面

1.安装

npm install html- webpack-plugin -- save-dev

2.使用

var htmlWebpackPlugin = require('html- webpack-plugin')

plugins:[
new htmlWebpackPlugin({
    template: 'index.html', //根目录下的
    inject: head, //显示在头部或body标签或false
    minify: { //对当前生成的html进行压缩
 removeComments: true, //删除注释，详情见npm官网
   chunks: ['main', 'a'] //指定当前html的chunks
    } })
]

plugins:插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务

Loaders是在打包构建过程中用来处理资源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。

在plugins中定义name：value，在index.html中用<%=  htmlWebpackPlugin.options.name%>取值（和jsp页面取值的写法相似，在页面中插入js语法添加<% %>）

多页面应用

new新的htmlWebpackPlugin等，可根据不同页面指定不同模板，或不同页面指定相同的模板

指定chunks（代码块），多个chunks就是Bundle