一步一步webpack 3

const VueLoaderPlugin = require( 'vue-loader/lib/plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const devServer = require("dev-server");
const path = require("path");
module.exports = {
entry:"./src/main.js",
output:{
filename:"[name].js",
path:path.resolve(__dirname, 'dist'),
//publicPath:"./dist/" //资源的路径

},
mode:"development",
module:{
rules:[
{
test:/\.css$/,
loader:["style-loader","css-loader"]
},
{
test:/\.png|\.jpg|\.gif$/,
loader:'file-loader'
},
{
test:/\.scss$/,
loader:["style-loader","css-loader","sass-loader"]
},
{
test:/\.vue$/,
loader:["vue-loader"]
}

]

},

plugins:[
new VueLoaderPlugin(),
new htmlWebpackPlugin({
filename:"../index.html",
title: 'Custom template'
}),
]
,
//devtool:"eval",
watch:true, //是否监听文件的改变后，重新构建
externals:{ //哪些文件不打包，从外部引入。如jquery 可以在文件中使用 import $ from 'jquery' 实际上打包时并没有 $也不会报错
jquery:"$"
},
performance:{
maxEntrypointSize: 10, //入口文件最大未多少
maxAssetSize: 10, //每个打包后的文件最大为多少
hints: "warning",
assetFilter(name){ //可以通过文件名过滤哪些文件有大小限制
console.log("===="+name);
return true;
}
}
,
//stats:"errors-only" //输出哪些信息

devServer:{
//contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
compress: true, // enable gzip compression
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
https: false, // true for self-signed, object for cert authority
noInfo: true, // only errors & warns on hot reload
}

}

 

 

 

{
"name": "webpack3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --hot --inline"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"dev-server": "^0.0.2",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.4",
"sass-loader": "^7.1.0",
"scss-loader": "^0.0.1",
"style-loader": "^0.23.1",
"vue-loader": "^15.4.2",
"webpack": "^4.23.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"webpack-html-plugin": "^0.1.1"
},
"dependencies": {
"axios": "^0.17.1",
"mint-ui": "^2.2.13",
"mockjs": "^1.0.1-beta3",
"mui": "0.0.1",
"vue": "^2.5.10",
"vue-router": "^3.0.1"
}
}

 

 

import "./css/test.css"
import "./css/test.scss"
import Vue from "vue/dist/vue.common.js"
import Test from "./test.vue"
import $ from "jquery"
console.log("xxxx");
$("body").css("color","green");
new Vue({
el:"#app",
// ...Test //1.有一个 render 方法
// render: (c) => { 2.使用 render绑定具体模板
// return c(Test);
// },
data(){
return {
name:"value"
}
},
template:`<div>{{name}}</div>` //3直接写 template

})
//.$mount(document.getElementById("app"));
console.log("xxxx");

 

 

<template>
<div class="title">
{{name}}
</div>

</template>

<script>
export default{
data:function(){
return {
name:"vue"
}
}

}

 

</script>

<style scoped type="scss">
.title
{
color:blue;
}

</style>