Webpack3學習筆記（一）

標籤：直接   引入   conf   dir   entry   chunk   style   mon   index   

一、準備

--npm init,初始化package.json

--npm install webpack --save-dev

工程根目錄建立webpack.config.js，用於webpack打包配置

二、打包配置

var path = require(‘path‘);var webpack = require(‘webpack‘);var htmlPlugin = require(‘html-webpack-plugin‘);module.exports = {    entry: {        index1: ‘./index.js‘,        index2: ‘./index2.js‘    },    output: {        path: path.resolve(__dirname,‘dist‘),        filename: ‘js/[name]-[chunkhash].bundle.js‘    },    plugins: [        new htmlPlugin({            title: ‘Webpack1234‘,            filename: ‘webpack.demo.html‘,            template: ‘index.html‘,        })    ]};

--webpack模組的引入類似與CMD，CommonJS,故可直接使用require()來引入相關模組

1、Entry（三種格式）

　　單一字串：entry: ‘./main.js‘

　　字串數組：entry: [‘./main.js‘, ‘./main2.js‘]

　　對象： entry: {

　　　　a: ‘./main.js‘,   -------->trunkName: 路徑

　　　　b: ‘./main2.js‘　　-------->trunkName: 路徑

　　}

2、Output

　　{

　　　　path: ‘‘    -----絕對路徑

　　　　filename: ‘bundle.js‘

　　},

　　若入口有多個trunk時，filename應為：‘[name].bundle.js’

Webpack3學習筆記（一）