webpack 构建 vue 开发环境
2021-05-29 02:02
阅读：546
YPE html>
标签：开发环境 ext scope 文件夹 ted class github art styles
1. 必要环境 请确保已安装
node npm webpack
2.创建一个test文件夹
mkdir test && cd test && npm init
3. 创建 webpack.dev.config.js
const path = require(‘path‘)
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘) // webpack插件 清除打包文件夹下多余文件 详细配置==>(https://www.npmjs.com/package/clean-webpack-plugin)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) // webpack插件 简化html创建 详细配置==>(https://github.com/jantimon/html-webpack-plugin)
const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘) // vue-loader 插件，它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块
const webpack = require(‘webpack‘)
module.exports = {
entry: {
app: ‘./main.js‘
},
devtool: ‘cheap-module-eval-source-map‘, // 控制如何生成 source map ==>(https://www.webpackjs.com/configuration/devtool/)
devServer: {
contentBase: ‘./dist‘,
hot: true
},
mode: ‘development‘,
module: {
rules: [
{
test: /\.(svg)(\?.*)?$/,
use: [‘file-loader‘]
}, {
test: /\.css$/,
use: [‘style-loader‘, ‘css-loader‘],
}, {
test: /\.vue$/,
use: [‘vue-loader‘]
}, {
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader: ‘url-loader‘,
options: {
limit: 10000,
name: ‘[name].[ext]‘,
outputPath: ‘assets/img‘,
publicPath: ‘‘
}
}]
}, {
test: /\.js$/,
use: [{
loader: ‘babel-loader‘,
options: {
presets: [‘react‘, ‘env‘]
}
}],
include: [
path.resolve(__dirname, ‘src‘)
]
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [‘url-loader‘]
}]
},
plugins: [ // 插件配置
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: ‘./src/index.html‘,
filename: ‘index.html‘
}),
new VueLoaderPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: ‘[name].js‘,
path: path.resolve(__dirname, ‘dist‘)
},
resolve: {
alias: {
‘vue$‘: ‘vue/dist/vue.esm.js‘,
‘@‘: ‘src‘
}
}
}
4. package.json
const path = require(‘path‘)
const {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘) // webpack插件 清除打包文件夹下多余文件 详细配置==>(https://www.npmjs.com/package/clean-webpack-plugin)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) // webpack插件 简化html创建 详细配置==>(https://github.com/jantimon/html-webpack-plugin)
const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘) // vue-loader 插件，它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块
const webpack = require(‘webpack‘)
module.exports = {
entry: {
app: ‘./main.js‘
},
devtool: ‘cheap-module-eval-source-map‘, // 控制如何生成 source map ==>(https://www.webpackjs.com/configuration/devtool/)
devServer: {
contentBase: ‘./dist‘,
hot: true
},
mode: ‘development‘,
module: {
rules: [
{
test: /\.(svg)(\?.*)?$/,
use: [‘file-loader‘]
}, {
test: /\.css$/,
use: [‘style-loader‘, ‘css-loader‘],
}, {
test: /\.vue$/,
use: [‘vue-loader‘]
}, {
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader: ‘url-loader‘,
options: {
limit: 10000,
name: ‘[name].[ext]‘,
outputPath: ‘assets/img‘,
publicPath: ‘‘
}
}]
}, {
test: /\.js$/,
use: [{
loader: ‘babel-loader‘,
options: {
presets: [‘react‘, ‘env‘]
}
}],
include: [
path.resolve(__dirname, ‘src‘)
]
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [‘url-loader‘]
}]
},
plugins: [ // 插件配置
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: ‘./src/index.html‘,
filename: ‘index.html‘
}),
new VueLoaderPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: ‘[name].js‘,
path: path.resolve(__dirname, ‘dist‘)
},
resolve: {
alias: {
‘vue$‘: ‘vue/dist/vue.esm.js‘,
‘@‘: ‘src‘
}
}
}
4 创建main.js
import Vue from ‘vue‘
import App from ‘./App.vue‘
import ViewUI from ‘view-design‘;
import ‘view-design/dist/styles/iview.css‘;
Vue.use(ViewUI);
new Vue({
el: ‘#app‘,
components: {App},
template: ‘‘
})
5. 创建App.vue
6. 创建 index.html
VueJS
7. 执行 命令: npm run start
webpack 构建 vue 开发环境
标签：开发环境 ext scope 文件夹 ted class github art styles
原文地址：https://www.cnblogs.com/412013cl/p/14752466.html
评论
亲，登录后才可以留言！