webpack完整配置
程序员文章站
2022-03-26 14:39:49
这里简单学习了一下webpack的配置首先是webpack.development.jsconst path=require('path');const StyleLintPlugin=require('stylelint-webpack-plugin');const HtmlWebpackPlugin=require('html-webpack-plugin');module.exports={ mode: 'development', output: { filename:...
这里简单学习了一下webpack的配置
首先是webpack.development.js
const path=require('path');
const StyleLintPlugin=require('stylelint-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
mode: 'development',
output: {
filename: 'bundle.js'
},
plugins: [
new StyleLintPlugin({
files: ['**/*.css', '**/*.less', '**/*.html', '**/*.htm', '**/*.vue', '**/*.scss']
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html')
})
],
devtool: 'source-map'
};
这里定义的是一些开发环境的的配置选项
主要是将文件输出并加载了一些插件
webpack.produce.js文件
const path=require('path');
const StyleLintPlugin=require('stylelint-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
mode: 'development',
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle.min.js'
},
plugins: [
new StyleLintPlugin({
files: ['**/*.css', '**/*.less', '**/*.html', '**/*.htm', '**/*.vue', '**/*.scss']
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html')
})
]
};
大致作用同上 这里是生产环境
webpack.test.js
const StyleLintPlugin=require('stylelint-webpack-plugin');
module.exports={
mode: 'development',
output: {
filename: 'bundle.js'
},
plugins: [
new StyleLintPlugin({
files: ['**/*.css', '**/*.less', '**/*.html', '**/*.htm', '**/*.vue', '**/*.scss']
})
]
};
这里是测试环境
以下是package.json
很重要的文件 包含了一些快捷的启动方式
以及一些重要的插件版本 如果想要完整配置 以下的插件几乎必不可少
{
"name": "8",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --env.development --open",
"build": "webpack --env.production",
"test": "jest-webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"autoprefixer": "^9.8.0",
"babel-loader": "^8.1.0",
"css-loader": "^1.0.1",
"eslint": "^5.16.0",
"eslint-loader": "^2.2.1",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.6.0",
"jest-webpack": "^0.5.1",
"less": "^3.11.3",
"less-loader": "^4.1.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"stylelint": "^9.10.1",
"stylelint-config-standard": "^18.3.0",
"stylelint-webpack-plugin": "^0.10.5",
"url-loader": "^1.1.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"browserslist": [
"> 0.5%",
"last 1 version",
"not dead"
],
"stylelint": {
"extends": "stylelint-config-standard"
},
"jest": {
"roots": [
"./tests/"
]
},
"directories": {
"test": "tests"
},
"description": ""
}
webpack.config.js
const path=require('path');
const StyleLintPlugin=require('stylelint-webpack-plugin');
module.exports=function (env, argv){
env=env||{};
let conf=null;
if(env.production){
conf=require('./config/webpack.production');
}else if(env.development){
conf=require('./config/webpack.development');
}else{
conf=require('./config/webpack.test');
}
return {
entry: './src/js/index',
module: {
rules: [
//javascript
{test: /\.(js|jsx)$/i, use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}, {
loader: 'eslint-loader',
options: {
exclude: /node_modules|bower_modules/
}
}]},
//css
{test: /\.css$/i, use: ['style-loader', 'css-loader', {
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')
]
}
}]},
//less
{test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader']},
//images
{test: /.(png|jpg|gif)$/i, use: {
loader: 'url-loader',
options: {
outputPath: 'imgs/',
limit: 4*1024
}
}},
//fonts
{test: /\.(eot|svg|ttf|woff|woff2)$/i, use: {
loader: 'url-loader',
options: {
outputPath: 'fonts/',
limit: 4*1024
}
}}
]
},
...conf
};
};
这里就是最具体加载插件的配置
本文地址:https://blog.csdn.net/Edasi/article/details/107556124
推荐阅读