webpack配置基础vue开发环境
在vuecli中,可以去定义webpack的配置,在 vue.config.js
中配置chainWebpack 文档
如何自己配置一个vue开发环境
识别vue文件需要安装以下模块
yarn add vue-loader vue-template-compiler -D
webpack.config.js
module.exports = {
entry: "./src/main.js",
output: {
filename: "app.[hash].js",
path: path.join(__dirname, "./dist")
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'components': path.resolve(__dirname, './src/components')
},
extensions: ['.js', '.css', '.vue'],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
hot: true
},
module: {
rules: [
// 处理css
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
// 图片处理
{
test: /\.(png|jpg|jpeg|gif)$/,
type: 'asset/resource',
generator: {
filename: 'static/[hash][ext][query]'
}
},
// sass scss
{
test: /\.(sass|scss)$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
//字体图标的处理
{
test: /\.(ttf|woff|woff2)$/,
type: 'asset',
generator: {
filename: 'fonts/[hash][ext][query]'
}
},
// vue
{
test: /\.vue$/,
use: [
'vue-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html'
}),
// 这个插件必须用
new VueLoaderPlugin()
]
}