vue-loader+webpack项目配置
npm i webpack vue vue-loader
npm i css-loader vue-template-compiler
webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //引入这行
const HTMLPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development'
const webpack=require('webpack')
const config = {
target: 'web',
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-simon.[ext]'
}
}
]
},
]
},
plugins: [
new VueLoaderPlugin(), //new一个实例
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? ' "development" ' : ' "production" '
}
}),
new HTMLPlugin()
]
}
if (isDev) {
config.devtool='#cheap-module-eval-source-map' //生成调试代码映射
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true,
},
hot:true //热加载
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config
index.js
import Vue from 'vue'
import App from './app.vue'
import './asserts/styles/test.css'
import './asserts/images/beijing.jpg'
const root=document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h)=>h(App)
}).$mount(root)
webpack-dev-server的配置和使用
npm i webpack-dev-server
npm i cross-env //跨平台读取本地环境变量
package.json
"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"
},
webpack.config.js
const isDev = process.env.NODE_ENV === 'development'
const config={
target: 'web',
}
if (isDev) {
config.devtool='#cheap-module-eval-source-map'
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true,
},
hot:true
}
生成HTML容器
npm i html-webpack-plugin
const HTMLPlugin = require('html-webpack-plugin');
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? ' "development" ' : ' "production" '
}
}),
new HTMLPlugin()