9102年webpack4搭建vue项目的方法步骤

npm init -y

npm i webpack webpack-dev-server webpack-cli -D

alert(1)

var path = require('path');
var cOnfig= { 
    entry: './src/main.js', 
    output: {  
     path: path.resolve(__dirname + '/dist'),//打包生成文件地址  
     filename: '[name].build.js',//生成文件ming
     publicPath: '/dist/'//文件输出的公共路径
 }
}
module.exports = config;

 entry: {
 app: './src/app.js',
 vendors: './src/vendors.js'
 }

"dev": "webpack-dev-server --open --hot", 
"build": "webpack --mode=development --progress --hide-modules",

npm run dev

"dev": "webpack-dev-server --mode=development --open --hot"

npm run build

npm i babel-loader babel-core babel-preset-env -D

module: {
 rules: [
  { 
   test: '/\.js$/',
   include: path.resolve(__dirname + '/src'),
   exclude: /node_modules/,
   use: [
    {
     loader: 'babel-loader',
     options: ['env']
    }
   ]
  }
 ]
}

import Vue from 'vue';
new Vue({ 
 el: '#app', 
 data: {  
  msg: 'hello' 
 }
})

resolve: {  
 alias: {   
 'vue$': 'vue/dist/vue.esm.js',   
 '@': path.resolve(__dirname, '/src')  
 } 
}

npm i style-loader css-loader -D

{ 
 test: /\.css$/, 
 use:['style-loader','css-loader'], 
 include: path.resolve(__dirname + '/src/'), 
 exclude: /node_modules/
}

div{ 
 color:skyblue;
} 

import './index.css';

npm i file-loader url-loader -D

{ 
 test: /\.(jpg|png|gif|svg)$/, 
 use: 'url-loader', 
 include: path.resolve(__dirname + '/src/'), 
 exclude: /node_modules/ 
}

import img from'./assets/a.png'

npm i html-webpack-plugin -D

var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ 
 new HtmlWebpackPlugin({ 
 template: './index.html', 
 chunks: ['main']    
 })
]

npm i vue-loader vue-style-loader vue-template-compiler -D

{ 
 test: '/\.vue$/', 
 loader: 'vue-loader'
}

var VueLoaderPlugin = require('vue-loader/lib/plugin');

new VueLoaderPlugin()

import Vue from 'vue';import App from './App.vue';
new Vue({ el: '#app', render: h => h(App)});

const webpack = require('webpack');

new webpack.HotModuleReplacementPlugin()

resolve: { 
 extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'], 
 alias: {  
 'vue$': 'vue/dist/vue.esm.js',  
 "@": path.resolve(__dirname, 'src'),  
 "components": path.resolve(__dirname, '/src/components'),  
 "utils": path.resolve(__dirname + '/src/utils'),  
 },  
 modules: ['node_modules'] 
}

npm i sass-loader node-sass -D

{ 
 test: /\.sass$/, 
 use:['vue-style-loader', 
  'css-loader', 'sass-loader' 
 ], 
 include: path.resolve(__dirname + '/src/'), 
 exclude: /node_modules/ 
},