在全局下安装：npm install webpack -g
安装指定版本：npm install webpack@版本号 -g
卸载:npm uninstall webpack -g
查看版本号:webpack -v
4.0以上webpack还要安装webpack-cli
npm install webpack-cli -g
package.json 的设置
{
"name": "222", //文件名称
"version": "1.0.0", //版本号
"description": "", //
"main": "index.js", //根目录的文件路径
"scripts": { //
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.dev.js --progress --port 3008 --open --hot",
"build": "webpack --config webpack.config.prod.js --progress",
"build4": "webpack --config webpack.config.prod4.js --progress"
//相关参数
//progress 显示打包进度
//colors配置打包输出颜色显示
//hot热加载，代码修改完后自动刷新
//inline 是刷新后的代码自动注入到打包后的文件中(当源文件改变时会自动刷新页面)
//-d 是debug模式，输入一个source-map，并且可以看到每一个打包的文件
//-p 是对代码进行压缩
//--port 3008 服务器端口
//--open 启动后默认打开浏览器
},
//设置开发者工具的端口号,不设置则默认为8080端口
/*devServer: {
inline: false,
port: 8181
},*/
"keywords": [],//简介
"homepage":"url",//项目官网的url
"bugs":"",//bug提交地址
"license":,//许可证
"author": "",
"repository":"",//代码库存
"license": "ISC",
"dependencies": { //上线所需要的依赖包
"axios": "^0.18.0",
"element-ui": "^2.4.4",
"iview": "^2.14.3",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"v-distpicker": "^1.0.17",
"vue": "^2.5.16",
"vue-lazyload": "^1.2.6",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": { //开发环境依赖包
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-component": "^1.1.1",
"babel-plugin-import": "^1.8.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"optimize-css-assets-webpack-plugin": "^5.0.0",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.7",
"url-loader": "^1.0.1",
"vue-loader": "^15.2.6",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
｝
打包文件webpack.config.prod.js的配置说明:
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//引入使用的模块
module.exports = {
//入口
entry: {
axios: "axios",
jquery: "jquery",
moment: "moment",
"v-distpicker": "v-distpicker",
"vue-lazyload": "vue-lazyload",
quanjiatong: ["vue", "vue-router", "vuex"],
bundle: "./src/main.js" //bundle中打包的是我们自己的源代码以及使用的模块
},
//打包的出口以及命名
output: {
path: path.join(__dirname, "dist"),
filename: "js/[name].js",
chunkFilename:"js/[name]-[hash:8].js",
},
//loader
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.css$/,
//use: ["style-loader", "css-loader"]
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: true //抽取出去之后，压缩css
}
}
]
})
},
{
test: /\.(ttf|woff|eot|svg|jpg|gif|png)$/,
use: [
{
loader: "url-loader",
options: {
limit: 5000, //这个相当于阀值，当资源文件大于5kb，从bundle.js中抽离出来
name: "statics/[name]-[hash:8].[ext]"
}
}
]
},
{
test: /\.js$/,
loader: "babel-loader",
// vue-loader 升级到了15.x
exclude: file => /node_modules/.test(file) && !/\.vue\.js/.test(file)
}
]
},
resolve: {
alias: {
"@": path.join(__dirname, "src")
},
extensions: [".vue", ".js", ".css", "*"]
},
//plugins
plugins: [
new CleanWebpackPlugin("dist"),
// 请确保引入这个插件！
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: "./template.html",
minify: {
removeComments: true, //去除注释
minifyCSS: true, //压缩css
minifyJS: true, //压缩js
collapseWhitespace: true //去除空格
}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
}),
new webpack.optimize.UglifyJsPlugin({
//压缩bundle.js
compress: {
warnings: false,
drop_debugger: true, //去除调试
drop_console: true //去除console
},
output: {
comments: false //去除copyright
}
}),
//抽离第三方包的，这里不要写bundle.js
new webpack.optimize.CommonsChunkPlugin({
name: [
"vue",
"vue-lazyload",
"v-distpicker",
"moment",
"jquery",
"axios"
],
// name: ['jquery', 'vue-moment','quanjiatong','axios','v-distpicker','vue-lazyload'],
// filename: "vendor.js"
// (给 chunk 一个不同的名字)
minChunks: Infinity
// (随着 entry chunk 越来越多，
// 这个配置保证没其它的模块会打包进 vendor chunk)
}),
new ExtractTextPlugin("css/styles.css"),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]
｝；