webpack一些簡單配置講解

用了挺久的vue搭配webpack開發項目，一直沒有寫webpack相關的筆記，因此有時候遇到相同問題無從下手，今天抽空就記錄一下，方便之後回頭查看。

1. 建立配置文件，設置輸出文件

// webpack.config.js
modules.exports = {        // entry源文件，output輸出文件
    entry: './src/app.js',
    output: {
        filename: './dist/app/bundle.js'
    }
}複製代碼

// package.json  改造下script部分
"scripts": {
    "dev": "webpack -d --watch",
    "prod": "webpack -p"
}複製代碼

2. 生成html文件

npm install  html-webpack-plugin --save-dev    安裝插件複製代碼

修改webpack.config.js文件,以後在src目錄下新建index.html文件

let HtmlWebpackPlugin = require('html-webpack-plugin');
moudle.exports = {
    ....
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    })]
}複製代碼

接着運行會看見html文件顯示出來

3. 使用loder處理CSS和SASS

loader對於將scss轉換爲css，容許直接在js文件中import css文件等..

npm install --save-dev css-loader style-loader    // 安裝插件複製代碼

loader處理css文件，更新webpack.config.js

module: {
    ...
    rules: [
        {
            test: '/\.scss$',
            use: ['style-loader', 'css-loader']
        }
    ]
}複製代碼

新建 src/app.scss  並加入如下內容

body {
    background: red;
}複製代碼

src/app.js

import css from './app.scss'
console.log('halo')複製代碼

最後就能看到運行成功的css樣式嵌套在html中

改用sass-loader把sass編譯成css[sass只是一種更好的語法來寫css]

npm install sass-loader node-sass --save-dev    // 安裝loader複製代碼

更新配置文件

rules: [
    {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
    }
]複製代碼

更改 app.scss

body {
    background: blue;
    p {
        color: green;
    }
}複製代碼

上面兩種方式都能運行成功，可是樣式是嵌套的，須要使用插件分離成一文件，會把咱們要的sass或者css處理好，放置到一個css文件中

npm install --save-dev extract-text-webpack-plugin複製代碼

添加配置  webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');
plugins: [
    new ExtractTextPlugin('style.css')
],
module: {
    rules: [
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader']
            })
        }
    ]
}複製代碼

最後執行會發現dist目錄下生成了一個style.css文件

4. 使用模塊熱

const webpack = require('webpack');
devServer: {
    hot: true
},
plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
 ]複製代碼

處理插件 extra-text-webpack-plugin

// 這個時候你改動內容會發現頁面沒有刷新改變，由於咱們以前用來處理css的插件，在使用熱更新的時候須要關閉
new ExtractTextPlugin({
    filename: 'style.css',
    disable: true
})複製代碼

這個時候重啓運行就能實現熱更新了。

5. 使用插件清除文件

這個插件是爲了在生產環境編譯環境時，把放置生產環境用的文件清除乾淨，從新生產新的。好比更新文件，以前文件處理掉，換成最新的

// 修改下出入口文件的配置
entry: {
    "app.bundle": "./src/app.js"
},
// 出口文件名就會變成  app.bundle + hash值 + .js
output: {
    path: __dirname + "dist",
    filename: '[name].[hash].js'
}複製代碼

從新運行以後會發現 dist 目錄下的js文件名帶上hash值，這個hash值當你的src/app.js發生改變時，再運行就會多生成一個帶hash的js文件。可是每次修改就會生成不少文件，可是咱們只須要最新的就好，其餘清空，因此須要用到 clean-webpack-plugin 插件實現

npm install clean-webpack-plugin複製代碼

const CleanWebpackPlugin = require('clean-webpack-plugin');
// dist 是咱們要清除的文件夾名字，數組表示能夠清除多個文件夾
plugins: [
    new CleanWebpackPlugin(['dist']),
]複製代碼

6. 區分生產環境和開發環境

extract-text-webpack-plugin生產環境下使用，開發環境不使用，咱們要區分出來。

// mac的操做，在windows上會報錯NODE_ENV不是內部或外部命令,也不是可運行的程序
// package.json
"scripts": {
    "dev": "webpack-dev-server",
    "prod": "NODE_ENV=production webpack -p"
}複製代碼

下面的是windows使用

npm install cross-env –save-dev  // 先安裝複製代碼

"scripts": {
    "dev": "webpack-dev-server",
    "prod": "cross-env NODE_ENV=production webpack -p"
}複製代碼

webpack.config.js 

// process.env.NODE_ENV可以獲得以前設置的變量值 若是是生成環境 isProd爲true 不然false
const isProd = process.env.NODE_ENV === 'production';     // 使用環境變量複製代碼

修改 extra-text-webpack-plugin插件代碼

const cssDev = ['style-loader', 'css-loader', 'sass-loader'];
const cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
})
const cssConfig = isProd ? cssProd : cssDev;
module: {
    rules: [
        {
            test: /\.scss$/,
            use: cssConfig
        }
    ]
}
const cssConfig = isProd ? cssProd : cssDev;
new ExtractTextPlugin({
    filename: "styles.css",
    disable: !isProd
})
// 開發環境熱更新就不須要這個插件。複製代碼

就簡單寫了一些，若是須要使用或瞭解更多，能夠看官網。