11.webpack开发环境和生产环境下配置文件

用户3385181161498
104 阅读1分钟

(一) 开发环境

webpack.config.js文件

const path = require('path');


const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin}  = require("clean-webpack-plugin")




module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'built.js',
path: path.resolve(__dirname, 'bulid')
},
module: {
rules: [
//处理css文件
{
test: /.css/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'style-loader'</span><span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token comment">//处理less文件</span>
            <span class="token punctuation">{<!-- --></span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.less/,
use: ['style-loader', 'css-loader', 'less-loader']
},
//处理css中的图片文件
{
test: /.(png|jpe?g|gif)/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'url-loader'</span><span class="token punctuation">,</span>
                options<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
                    limit<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span>
                    outputPath<span class="token punctuation">:</span> <span class="token string">'imgs/'</span><span class="token punctuation">,</span>
                    name<span class="token punctuation">:</span> <span class="token string">'[hash:8].[ext]'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token comment">//处理html文件中的图片文件</span>
            <span class="token punctuation">{<!-- --></span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.html/,
loader: 'html-loader',
},
//处理其他文件
{
exclude: /.(js|css|less|png|jpe?g|gif|html)$/,
loader: 'file-loader',
options: {
outputPath: 'css/',
}
}
]
},
plugins: [
//以自己的html为模板
new HtmlWebpackPlugin({
template: './src/index.html',
minify:false
}),
//清理构建后的文件夹
new CleanWebpackPlugin()
]
}

(二) 生产环境

  1. webpack.config.js文件

    const path = require('path');


//使用自己的模板文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//将css从js文件中抽离
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//css压缩
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");




// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';




//处理css的配置
const CommonCssLoader = [
{
loader:MiniCssExtractPlugin.loader,
options:{
//css中图片路径出问题时进行配置
publicPath: '../',   // 当前的css所在的文件相对于打包后的根路径dist的相对路径
}
},
'css-loader',
{
loader: 'postcss-loader', //css兼容处理
options: {
ident: 'postcss',
plugins: () => [require('postcss-preset-env')()]
}
}
];




module.exports = {
mode: 'production',
entry: './src/js/index.js',
output: {
filename: 'built.js',
path: path.resolve(__dirname, 'bulid'),
},
module: {
rules: [
//处理css文件
{
test: /.css/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span>CommonCssLoader<span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token comment">//处理less文件</span>
            <span class="token punctuation">{<!-- --></span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.less/,
use: [...CommonCssLoader, 'less-loader']
},
//处理css中的图片文件
{
test: /.(png|gif|jpe?g)/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">"url-loader"</span><span class="token punctuation">,</span>
                options<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
                    limit<span class="token punctuation">:</span> <span class="token number">8</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span>
                    outputPath<span class="token punctuation">:</span> <span class="token string">'imgs/'</span><span class="token punctuation">,</span>
                    name<span class="token punctuation">:</span> <span class="token string">'[name][hash:8].[ext]'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token comment">//处理html中的文件</span>
            <span class="token punctuation">{<!-- --></span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.html/,
loader: 'html-loader'
},
//处理其他文件
{
exclude: /.(js|html|css|less|png|gif|jpe?g)/</span><span class="token punctuation">,</span>
                loader<span class="token punctuation">:</span> <span class="token string">'file-loader'</span><span class="token punctuation">,</span>
                options<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
                    outputPath<span class="token punctuation">:</span> <span class="token string">'other/'</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token comment">//js语法检查</span>
            <span class="token punctuation">{<!-- --></span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.js/,
exclude: /node_modules/,
loader: 'eslint-loader',
// 相对于balel-loader优先执行
enforce: 'pre',
options: {
//自动修复不符合eslint规则的代码
fix: true
}
},
//js兼容性处理
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
//按需加载
useBuiltIns: 'usage',
//指定core-js版本
corejs: {
version: 3
},
//指定兼容性做到那个版本的浏览器
targets: {
chrome: '60', //兼容版本大于60的chrome浏览器
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
]
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: false //如果需要压缩html需要这样设置
}),
new MiniCssExtractPlugin({
filename: 'css/built.css', //将css抽离到css文件夹中的built.css文件中
}),
new OptimizeCssAssetsWebpackPlugin(),
]
}

  2. package.json文件

    "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 safari version",
      "last 1 firefox version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }
avatar
文章
阅读
粉丝