webpack4.x连载之为不同环境书写配置文件，并配置webpack-dev-server

在目录下新增三个配置文件

如果没有建立index.html这个入口文件，

在webpack里有一个插件：html-webpack-plugin

安装插件：cnpm install html-webpack-plugin --save-dev

//是nodejs的一个基本包，用来处理路径的，在打包项目时用绝对路径，防止出错

constpath=require("path");

constwebpack= require("webpack");

//如果没有index.html入口文件的情况,可以使用这个插件

constHTMLPlugin=require("html-webpack-plugin");

//以前直接vue-loader就可以，现在必须导入这个模块，并配置这个插件才能正常编译.vue文件

constVueLoaderPlugin= require('vue-loader/lib/plugin');

module.exports={

mode:"development",

//入口文件的配置项

//path.join就是把dirname和后面的路径拼接起来，形成绝对路径

entry:path.join(__dirname,"src/main.js"),

//出口文件的配置

output:{

path:path.join(__dirname,"dist"),

filename:"bundle.js"

},

plugins: [

newVueLoaderPlugin(),

//调用html-webpack-plugin插件

newHTMLPlugin()

],

module:{

rules:[

{

test:/\.vue$/,

use:['vue-loader']

},

{

test:/\.css$/,

use:['style-loader','css-loader']

},

{

test:/\.(jpg|png|gif)$/,

use:['url-loader']

},

{

test:/\.js$/,

exclude:/node_modules/,

use: {

loader:'babel-loader',

options: {

presets:['env'],

plugins:"transform-runtime"

//include表示哪些目录中的 .js 文件需要进行 babel-loader

//exclude表示哪些目录中的 .js 文件不要进行 babel-loader

constwebpack= require("webpack");

baseWebpackConfig.mode="development";

//帮助在页面上调试代码,在项目里使用的是.vue的文件开发模式,使用的也是es6代码

//这些代码在浏览器里是不能直接运行的,如果直接去调试浏览器代码是经过编译的

//所以需要使用source-map去进行代码的映射,当在浏览器调试的时候还是自己编写的源码

//这样更容易定位到错误,webpack提供了devtool

baseWebpackConfig.devtool="source-map";

// 服务配置

baseWebpackConfig.devServer= {

port:"9900",

overlay:{

errors:true//当webpack编译过程中出现任何错误,让它显示在网页上面

},

open:false,//启动webpack编译的时候自动打开浏览器

hot:true//只刷新当前组件的代码不刷新整个页面

};

//设置hot后需要加相关插件

//启动hot功能的插件

newwebpack.HotModuleReplacementPlugin(),

);

module.exports=baseWebpackConfig;

baseWebpackConfig.mode="production";

...[

//baseWebpackConfig.plugins这里可以配置一些生产环境所需的插件，如果没有，可以省略

]

);

module.exports=baseWebpackConfig;

main.js

importVuefrom"vue";

importAppfrom"./app.vue";

constdiv=document.createElement("div");

div.id="app";

document.body.appendChild(div);

newVue({

el:"#app",

render:(h)=>h(App)

});

package.json

"scripts": {

},