webpack一些简单配置讲解

M666
932 阅读1分钟

用了挺久的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
})
// 开发环境热更新就不需要这个插件。

就简单写了一些，如果需要使用或了解更多，可以看官网。


avatar
文章
阅读
粉丝