基础引见

引入文件

// a.js
require('./b.js')
require('style-loader!css-loader!./a.css')

打包文件

// cli
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!'

预览html

// html
<script src='./a.bundle.js'></script>

webpack选项参数
–watch
–progress
–display-modules
–display-reasons
–color
–display-error-details

基础设置

建立项目
mkdir webpack-demo
cd webpack-demo
npm init
npm install webpack –save-dev
mkdir src
mkdir dist
vsc //vscode
建立html并引入bundle.js
建立webpack.config.js//可参考官网设置API

//模块化输出
module.exports={
    // 
    entry:'./src/script/main.js',
    output:{
        path:'./dist/js',
        filename:'bundle.js'
    },
}
//cli
webpack --config webpack.dev.config.js//指定config文件为webpack.dev.config.js
//

详解entry和output

entry的3种：单一字符串，数组，对象
output根绝entry差别而差别
【数组】
main和sub-main打包成bundle

module.exports={
    entry:[
    './src/script/main.js',
    './src/script/sub-main.js'
    ],
    output:{
        path:'./dist/js',
        filename:'bundle.js'
    },
}

【对象】–多页面运用
main和打包成bundle

module.exports={
    entry:{
        page1:'./src/script/main.js',
        page2:[
            './src/script/main.js',
            './src/script/sub-main.js'
        ],    
    },
    output:{
        path:'./dist/js',
        //【占位符】hash本次 chunkhash静态资本转变后才变化
        filename:'[name]-[hash]-[chunkhash].js'
    },
}

运用插件

html-wabpack-plugin

作用：同步html内引入的js的chunkhash

//cli
npm install html-wabpack-plugin --save-dev
//webpack.config.js
var htmlWebpackPlugin=require('html-wabpack-plugin')
module.exports={
    // 上下文的默许环境就是当前运转剧本的目次
    // context:
    entry:{
        page1:'./src/script/main.js',
        page2:[
            './src/script/main.js',
            './src/script/sub-main.js'
        ],    
    },
    output:{
        path:'./dist',
        // js
        filename:'js/[name]-[hash]-[chunkhash].js',
        // 上线环境的
        publicPath:'http://m.mi.com/'
    },
    // 一切plugin都输出到output.path
    plugin:[
        //初始化插件 并传入相干参数
        new htmlWebpackPlugin({
            // 上下文环境 以根目次html作为模板 
            template:'index.html',
            filename:'index-[hash].html',
            inject:'head',//不设置的话 默许放到body标签内
            //向html内里传参,
            //在html用<%= htmlWebpackPlugin.options.title %>吸收
            title:'haha',//date:new Date(),
            //紧缩html 删除解释和空格
            minify:{
                removeComments:true,
                collapseWhitespace:true
            }
        });
    ]
}

<!-- index.html -->
<!-- 能够编写js的模板引擎<%= 赋值 %><% 实行 %> -->

<% for (var key in htmlWebpackPlugin.files) {%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>

<% for (var key in htmlWebpackPlugin.options) {%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>

<!-- 用途 -->
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry%>"></script>