webpac的安装 已经配置介绍(速成法)

 

在全局下安装：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$/),
  ]
};