vue + webpack 简单基础配置
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //只支持webpack4
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const isDev = process.env.NODE_ENV === 'development';
const HTMLPlugin = require("html-webpack-plugin"); //使用一个插件来配置我的html文件,容纳我们的js文件和css文件;
const webpack = require("webpack")
let config = {
entry: './src/index.js', // JavaScript 执行入口文件
output: {
filename: 'bundle.js', // 把所有依赖的模块合并输出到一个 bundle.js 文件
path: path.resolve(__dirname, './dist'), // 输出文件都放到 dist 目录下
},
module: {
rules: [{
test: /\.css$/, // 用正则去匹配要用该 loader 转换的 CSS 文件
use: [
MiniCssExtractPlugin.loader,
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: "postcss.config.js"
}
}
}
]
}, {
test: /\.(png|jpg|jpeg|svg)$/,
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 10000,
outputPath: "img/"
}
}]
},
{
test: /\.jsx$/,
loader: 'babel-loader' //解析vue里面js文件
},
{
test: /.vue$/,
loader: 'vue-loader'
}, {
test: /\.styl(us)?$/, //配置解析vue文件中的stylus
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: "postcss.config.js"
}
}
},
{
loader: "stylus-loader"
},
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '../dist/css/style.css', // 从 .js 文件中提取出来的 .css 文件的名称
}),
new VueLoaderPlugin(), //vue-loader
new HTMLPlugin(),
new webpack.DefinePlugin({
"process.env": { //判断环境 vue 不同的环境会区分打包 使用这个变量进行区分
NODE_ENV: isDev ? '"development"' : '"production"'
}
})
],
mode: 'development' // 设置mode
};
if (isDev) {
config.devtool = "#cheap-module-eval-source-map" //在页面上调试代码
config.devServer = {
port: 8000,
host: "0.0.0.0", //可以通过localhost进行访问,也可以通过内网IP进行访问
overlay: {
errors: true //有任何的错误就显示在页面上
},
open: true, //自动打开浏览器
// historyFallback: { //把没有映射的地址,都映射到html上}
hot: true, //改了组件的代码只是渲染当前组件的效果,不会让整个页面都重新加载
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(), //启动HotModule功能
new webpack.NoEmitOnErrorsPlugin() // 减少不需要展示信息的问题
)
}
module.exports = config;
复制代码
下面是package.josn文件的配置:
{
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js ",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.5.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-preset-env": "^1.7.0",
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.6.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.32.1",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1"
}
}
复制代码
还需要一个.babelrc文件和postcss.config.js文件
先来.babelrc文件
{
"presets":[
"env"
],
"plugins":[
"transform-vue-jsx" //专门转化vue里面的js代码
]
}
复制代码
postcss.config.js
//postcss 是帮助我们后处理css的;
const autoprefixer = require("autoprefixer"); //需要加浏览器前缀的css属性,通过加autoprefixer自动处理css属性,加上浏览器的前缀
module.exports = {
plugins: [
autoprefixer()
]
}
复制代码