webpack3.6.0版本与loaders,plugins版本的兼容性问题解决
1.webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// 1. 入口
entry: './src/js/main.js',
// 2. 输出
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// 图片资源有一个公共的输出路径
// publicPath: 'dist/'
},
// 3. 模块
module: {
rules: [
{
test: /\.css$/,
// css-loader只负责将css文件加载
// style-loader负责将样式添加到dom中
// 使用多个loader从右向左读取
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}
]},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载的图片,小于limit时,会将图片编译成base64的文件存储
// 当加载的图片,大于limit时,需要使用file-loader模块加载
limit: 8192,
// 把大于limit的文件分类到dist文件夹
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
// exclude 排除
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
// presets: ['@babel/preset-env']
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}]
},
// 4. 解析
resolve: {
// 扩展名
extensions: ['.js', '.css', '.vue'],
// alias:别名
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
// 5. 配置插件
plugins: [
new webpack.BannerPlugin('最终版权归xiao&xin所有'),
// 导入html文件
new HtmlWebpackPlugin({
template: 'index.html'
}),
// 压缩文件
new UglifyjsWebpackPlugin()
]
}
2.package.json
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.12"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.0.0",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"less": "^3.13.0",
"less-loader": "^4.1.0",
"style-loader": "^2.0.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^2.1.0",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^3.6.0"
}
}
第一次写文章,非常有幸能读我的文章。如果有错误的地方欢迎指正,或者有什么好方法好建议也强烈欢迎私聊交流一下,希望能帮助到你。