<!--
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/>',
});
---------------------------------------------------