webpack學習

全局安裝安裝webapck

npm i webpack -g

如今咱們就能夠全局的使用webpack命令了

webpack中基礎的命令：

webpack enter.js output.js --watch

這個命令是將enter.js打包成output.js，而後html只須要引用該文件就能夠了
看以下entry.js,這是簡單的js代碼。

// 這邊是處理js邏輯
let people = require('./people')
let $ = require('jquery')

$.each(people, function(key, value){
    $('body').append('<h1>'+people[key].name+'</h1>')
})

那麼如何來打包css文件呢，只須要將css也引入到enter.js便可，這樣跟文件index.html仍是隻須要引用output.js便可
引入css須要幾個插件；css-loader， style-loader（因爲是靜態文件，須要編譯）

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

以上爲簡單的打包；若是須要複雜的工程的話，webpack推薦使用配置文件來配置
webpack的配置文件必須是webpack.config.js
上面的配置只須要這樣寫

module.exports = {
    // 入口文件
    entry: './app.js',
    // 出口文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    // 須要依賴的插件或裝載器
    mudule: {
        loader: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}

如下是一個簡易的開發目錄

針對該目錄配置文件以下
ps: 須要將es6轉碼須要安裝 babel-core,babel-loader,babel-env,babel-preset-es2015

module.exports = {
    // 入口文件
    entry: '.src/js/app.js',
    // 出口文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    // 須要依賴的插件或裝載器
    mudule: {
        loader: [
            // css加載
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            // es6轉碼爲es2015
            {
                test: /\.js/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']  // ps這一塊也能夠寫在.babelrc文件下
                },
                exclude: /node_modules/
            }
        ]
    },
    // 自動生成html文件，會引入js
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './index.html'})
    ]
}