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
})
// 开发环境热更新就不须要这个插件。复制代码

就简单写了一些，若是须要使用或了解更多，能够看官网。