webpack.config.js和package.json
webpack是基于node的，所以写法采用commonjs
let path=require('path');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:''相对路径 入口文件
output:{打包后文件
filename:文件名
path:必须是绝对路径path.resolve('./dist')
},
module:{各文件类型用的loader
rules:[
{test:匹配文件类型正则,use:字符串或数组 使用哪些处理器: ,exclude:排除文件的正则},
//先安装在配置，安装时默认是dependencies，加了--save-dev才是devDependencies
]
},
plugins:[
new HtmlWebpackPlugin({//该插件功能是打包js入口文件时，以该html作为模板，将打包后的js插入该模板，将html文件输出到输出目录中
template:''根html文件路径
filename:html文件名
})
],
devtool:'cheap-module-source-map',//debug时可以查找到相应js 而不是打包后的js
devServer: {
historyApiFallback: true,//允许热更新时 解决history路径的刷新失败
}
}
只有chrome高版本才支持es6语法,所以webpack需要预编译js文件成es5语法，安装
babel-core babel-loader babel-preset-es2015 babel-preset-stage-0
解析es6和es7语法
并且在项目中加上.babelrc文件，内容为{
"presets": ["es2015","stage-0","react"]
}
-----------------------------------------------------------------------
package.json中配置项目启动,
start项运行时可以省略run,
dev执行webpack 是编译打包用于上线，
build执行webpack-dev-server 是启动webpack的服务器，打包后的代码在内存中，不会输出到项目目录，同时具有热更新的功能。
可选配置项：
--content-base //设定webpack-dev-server的director根目录。如果不进行设定的话，默认是在当前目录下。 --quiet: //控制台中不输出打包的信息，开发中一般设置为false，进行 打印，这样查看错误比较方面 --no-info: // 不显示任何信息 --colors: //对信息进行颜色输出 --no-colors: //对信息不进行颜色输出 --compress: //开启gzip压缩 --host <hostname/ip>: //设置ip --port <number>: //设置端口号，默认是:8080 --inline: //webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口, --hot: //开发热替换 --open: //启动命令，自动打开浏览器 --history-api-fallback: //查看历史url
--config 新的配置文件名 //使用新的配置文件打包
------------------------------------------------------------------------------------------------------------------------------
附源码：
let path=require('path');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
path:path.resolve('./dist')
},
module:{
rules:[
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
{test:/\.vue$/,use:'vue-loader'},
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.(svg|eot|woff2|ttf|woff|png|gif|jpg)/,use:'url-loader'},
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html'
})
]
}
{
"name": "vue-load",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"less": "^3.0.0-alpha.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.2"
},
"dependencies": {
"bootstrap": "^3.3.7",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
}
}
较全面的安装包：
## 后端依赖的模块 ``` npm install body-parser connect-mongo ejs express express-session mongoose -S(--save的缩写) ``` ## react前端依赖的模块 ``` npm install react react-dom react-redux redux redux-thunk redux-promise redux-logger react-router-dom react-router-redux history
选装:react-transition-group动画 react-swipe swipe-js-iso 轮播图 es6-promise whatwg-fetch -S ```
## 开发依赖模块 ``` npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 file-loader url-loader less less-loader css-loader style-loader webpack webpack-dev-server html-webpack-plugin -D ```(--save-dev的缩写)
(url-loader用于处理图片 需要依赖file-loader)
