首先npm一波:
npm i webpack -D
npm i webpack-cli -D
webpack默认情况下约定大于配置,即不指定时,默认入口entry是 src -> index.js,打包好的出口output文件是dist文件夹下的main.js
如果想要指定,在webpack.config.js中,这样写即可:
const path = require('path')
const config = {
entry: {
main: 'path/to/your/entry/index.js'
},
output: {
filename:'[name].bundle.js',
path: path.join(__dirname,'./dist')
}}
module.exports = config
另外,webpack.config.js中(即node.js)支持的引出模块的语法是
module.exports = {}
ES6才支持export default = {}
然后配置mode
webpack.config.js中,mode是唯一必须要配置的
mode: 'development'
//或者 mode: 'production',
webpack配置实时更新:
npm i webpack-dev-server -D
webpack-dev-server 配置属性:
有三种方法:
有配置文件方式、package.json方式和纯node的API实现方式,下面是
- package.json方式
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --hot --progress --compress --port 3005 --host 127.0.0.8"
// --open到之后都是可选项
// --open是自动打开浏览器,可以设置使用哪个浏览器
// --hot是自动刷新
// --progress
// --compress 当它被设置时候对所有的服务器资源采用gzip压缩
// --port 设置端口号
// --host 设置服务器的主机号
},
- 配置文件方式
devServer: {
contentBase: "./",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
host:'0.0.0.0',
port:7000,
hot:true,
inline: true,//实时刷新
hot:true,//自动刷新
compress:true,//当它被设置时候对所有的服务器资源采用gzip压缩
overlay: true, //用于在浏览器输出编译错误的,默认是关闭的,需要手动打开:
stats: "errors-only" ,//这个配置属性用来控制编译的时候shell上的输出内容,因为我们并不需要所有的内容,而只是需要部分的如errors等
open:true, //是自动打开浏览器,可以设置使用哪个浏览器
proxy: { //重定向是解决跨域的好办法,当后端的接口拥有独立的API,而前端想在同一个domain下访问接口的时候,可以通过设置proxy实现。
"/api": {
target: "http://localhost:3000",
pathRewrite: {"^/api" : ""}
}
},//重定向
}
其他一些常见配置
HtmlWebpackPlugin简化html文件的创建。自动匹配不断变化的文件,省去了手动维护。
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const hwp = new htmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'), // 源文件
filename: 'index.html' // 生成的内存中首页的名字
})
module.exports = {
// mode: 'development'
// 约定大于配置
mode: 'production',
plugins:[
hwp
],
module: { //要打包的第三方模块
rules: [
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
{ test:/\.css$/, use:[ 'style-loader', 'css-loader?modules' ] }
]
},
resolve: {
// 表示默认补全文件后缀
extensions: ['.js', '.jsx', 'json'],
// resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。
alias: { // 用@指代这个绝对路径
'@': path.join(__dirname,'./src')
}
}
}
resolve 表示默认补全文件后缀,比如说导入某个文件时,默认js,json后缀不写也会匹配到,但是如果想jsx也会省略的话,需要显示配置