webpack(12)配置dev-server
1.配置了dev-server的好处是，可以将我们打包后的文件作为一个后台服务启动，然后在浏览器中打开启动的地址就可以浏览我们打包出来的网页了。并且可以在我们代码改动后自动重新打包刷新网页。就不用我们每次手动打包，打包后需要自己找到打包后的文件在浏览器打开。
2.安装包：npm install webpack-dev-server -D
3.安装后使用npx webpack serve就可以启动服务，打开启动后的地址就可以看到打包出来的网页了。
4.如果要配置代码改动后自动更新，需要在webpack.config.js中加入一项：target:"web"
5.可以在npx webpack serve启动服务的时候加上一些命令行选项来指定端口/域名等配置，比如npx webpack serve --port 3000指定启动端口为3000
更多的时候我们是将这些启动项配置写在webpack.config.js文件中：
const{resolve}=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
entry:{
vender:['./src/js/jquery.js','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:resolve(__dirname,'build'),
filename:'[name].js'
},
mode:'development',
module:{
rules:[
//{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
{test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},
{test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']},
{test:/.(jpg|png)$/,use:[{ loader:'url-loader',options:{
publichPath:'./images',
outputPath:'images/',
limit:1024*16,
name:'[name].[ext]'
}}]},
{test: /\.(html)$/, use:['html-loader']},
{exclude:/\.(js|json|html|css|less|scss|png|jpg|jpeg|gif)$/,use:[{loader:'file-loader',options:{
publichPath:'./svg',
outputPath:'svg/',
name:'[name].[ext]'
}}]},
{
test:/\.js$/,
exclude:/node_modules/,
loader:'eslint-loader',
options:{
fix:true
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['vender','index']
}),
new HtmlWebpackPlugin({
template:'./src/cart.html',
filename:'cart.html',
chunks:['vender','cart']
}),
new MiniCssExtractPlugin({
filename:'index.css'
}),
//new OptimizeCssAssetsPlugin()
],
target:"web",//配置浏览器自动刷新
devServer:{
port:3001,//启动端口配置
compress:true,//是否压缩
open:true//是否打开浏览器
}
}
6.一般将启动命令配置在package.json文件中，使用更加简短的命令来启动
