webpack學(xué)習(xí)

劉東發(fā)布于2019-08-02 10:35 / 1516人閱讀

摘要：全局安裝安裝現(xiàn)在我們就可以全局的使用命令了中基礎(chǔ)的命令這個命令是將打包成，然后只需要引用該文件就可以了看如下這是簡單的代碼。

全局安裝安裝webapck

npm i webpack -g

現(xiàn)在我們就可以全局的使用webpack命令了

webpack中基礎(chǔ)的命令：

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(""+people[key].name+"")
})

那么如何來打包css文件呢，只需要將css也引入到enter.js即可，這樣跟文件index.html還是只需要引用output.js即可
引入css需要幾個插件；css-loader， style-loader（由于是靜態(tài)文件，需要編譯）

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

以上為簡單的打包；如果需要復(fù)雜的工程的話，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"
            }
        ]
    }
}

以下是一個簡易的開發(fā)目錄

針對該目錄配置文件如下
ps: 需要將es6轉(zhuǎn)碼需要安裝 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轉(zhuǎn)碼為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"})
    ]
}