html版本号 webpack_webpack-配置分离

执行 npm install webapck-merge --save-dev

base.config.js

const path = require("path");

//执行npm init 生成package.json npm 包管理文件 npm install 下载相关依赖

//此文件的作用就是配置打包的入口和出口

const webapck=require("webpack");//引用webpack 后面plugin插件要要用到它

//执行 npm install html-webpack-plugin --save-dev --作用在dist文件夹中生成index.html文件 在body里面自动注入scripts 引入bundle.js

// 修改版本号为："html-webpack-plugin": "^3.2.0",

const HtmlWebpackPlugin = require("html-webpack-plugin");

//丑化(压缩bundle.js)执行 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

module.exports = {

entry: "./src/main.js",

output: {

//获取绝对路径 __dirname

path: path.resolve(__dirname, "../dist"),

filename: "bundle.js",

//涉及到url路径都会到dist下面找

//因为使用htmlWebpackPlugin插件的原因 因此在当前目录下找就可以 所以注释掉

// publicPath: "dist/"

},

//loader 必须在此处配置

module: {

rules: [

{

test: /\.css$/,

//需要执行 npm install --save-dev css-loader

//css-loader 只负责加载

//需要执行 npm install --save-dev style-loader

//style-loader 负责将样式添加到DOM中让其生效

//使用多个loader时候是从右到左 执行【顺序不能改变】

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

},

//npm install --save-dev url-loader 让webpack可以处理图片格式 图片大于limit base64字符串格式

//npm install --save-dev file-loader 让webpack可以处理图片格式 图片小于limit 直接打包进入dist 需要配置output:{ publicPath:"dist/"}

{

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

use: [

{

loader: 'url-loader',

options: {

//当加载的图片小于limit时候，会将图片编译成base64字符串格式

//当加载的图片大于limit时候，需要引入 file-loader模块 即 npm install --save-dev file-loader

//自动将图片打包进dist/ 同时需要配置 output:{publicPath:"dist/"} 这样涉及到url 都会到dist路径下面寻找

limit: 8192,

// limit: 2000000

//对打包进入到dist 中图片进行 固定文件夹和命名的管理 [hash:8]hash值为8位 [ext]扩展名

name: "img/[name].[hash:8].[ext]"

}

}

]

},

//打包进dist 将es6语法转换成es5语法

//npm install babel-loader@7 babel-core babel-preset-es2015 需要安装bable 模块

{

test: /\.js$/,

exclude: /(node_modules|bower_components)/,

use: {

loader: 'babel-loader',

options: {

presets: ['es2015']

}

}

},

//引入vue模块化 执行 npm install vue-loader 和 npm install vue-template-compiler

{

test: /\.vue$/,

use: {

loader: 'vue-loader',

}

},

]

},

//在webpack中 引用vue npm install vue --save (此处不需要 -dev 因为不仅仅是开发时环境需要 在运行时环境也需要)

resolve: {

//配置别名，在项目中可缩减引用路径

//指定使用Vue 的版本 可以直接使用 runtime-compiler 方式 允许存在template 进行编译

//在node_modules中找到vue/dist/vue.esm.js这个js

extensions:[".css",".js",".vue"],//用于引用模块省略后缀

alias: {

vue$: 'vue/dist/vue.esm.js'

}

},

plugins:[

//版权插件

new webapck.BannerPlugin("最终版权归穆加超所有"),

//执行 npm install html-webpack-plugin --save-dev --作用在dist文件夹中生成index.html文件 在body里面自动注入scripts 引入bundle.js

// 修改版本号为："html-webpack-plugin": "^3.2.0",

new HtmlWebpackPlugin({

//打包进入dist index.html的模板 为了引入

template:'index.html'

})

]

};

dev.config.js

const webpackMerge = require("webpack-merge");

const baseConfig = require("./base.config.js");

module.exports=webpackMerge(baseConfig,{

devServer:{

contentBase:"./dist",

//实时监听

inline:true

}

});

prop.config.js

//丑化(压缩bundle.js)执行 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

const webpackMerge = require("webpack-merge");

const baseConfig = require("./base.config.js");

module.exports=webpackMerge(baseConfig,{

plugins:[

// 执行丑化插件

new UglifyjsWebpackPlugin()

]

});

注意点： //获取绝对路径 __dirname path: path.resolve(__dirname, "../dist"),调整

在package.json中设置

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack --config ./build/prod.config.js",

"dev": "webpack-dev-server --open --config ./build/dev.config.js"

},

删除原来的webpack.config.js