<!--
npm init -y 下載 package.json
npm i webpack@3.6.0 -S 下載node_modules npm un webpack 卸載
修改文件 package.json
"scripts": {
"dev": "webpack ./main.js ./build.js"
},
啟動 npm run dev
-->
"scripts": {
"dev": "webpack --config ./webpack.dev.config.js",
"prod": "webpack --config ./webpack.prod.config.js"
},
啟動 npm run dev
npm run dev
webpack.dev.config.js內容
module.exports = {
// 入口 一個或多個
entry: {
'main': './main.js'
},
// 出口
output: {
filename: './build.js'
},
watch: true, //監視文件發生改動，自動產出build.js
}
webpack.prod.config.js內容
module.exports = {
// 入口 一個或多個
entry: {
'main': './main.js'
},
// 出口
output: {
filename: './build.js'
},
}
--------------------------------導入css
module.exports = {
// 入口 一個或多個
entry: {
'main': './main.js'
},
// 出口
output: {
filename: './build.js'
},
//生命模塊
// 包含這各個loader
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
watch: true, //監視文件發生改動，自動產出build.js
}
npm i css-loader -S
npm i style-loader -S
npm i url-loader file-loader -S
npm i less -S
npm i less-loader -S
npm i html-webpack-plugin -S
npm i webpack-dev-server -S npm i webpack-dev-server@2.9.0 -S
--open:自動打開瀏覽器
--hot熱替換：不在刷新的情況不替換，css樣式
--inline:自動刷新
--port:9999指定端口
--process：顯示編譯進度
es6部分
npm i babel-core babel-loader babel-presert-env babel-plugin-transform-runtime -S
查看版本 npm info vue-loader versions
配套的
import Vue from 'vue'; //node_modles下面的vue
render: c => c(App)
----------------------------------------------------------------------------------------
import Vue from './vue.js';
import App from './App.js';
new Vue({
el: "#app",
components: {
app: App
},
template: '<app/>',
});
---------------------------------------------------