webpack packaging configuration (detailed tutorial)

This article mainly introduces the Vue project template file webpack packaging configuration. Friends who need it can refer to

1, github

## github address: https://github.com/MengFangui/VueProjectTemplate

2. Webpack configuration

(1) Basic configuration webpack.base .config.js

const path = require('path');
//处理共用、通用的js
const webpack = require('webpack');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
 //入口文件
 entry: {
  main: './src/main',
  vendors: './src/vendors'
 },
 output: {
  path: path.join(__dirname, './dist')
 },
 module: {
  rules: [
   //vue单文件处理
   {
    test: /\.vue$/,
    use: [{
     loader: 'vue-loader',
     options: {
      loaders: {
       less: ExtractTextPlugin.extract({
        //minimize 启用压缩
        use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
        fallback: 'vue-style-loader'
       }),
       css: ExtractTextPlugin.extract({
        use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
        fallback: 'vue-style-loader'
       })
      }
     }
    }]
   },
   //iview文件夹下的js编译处理
   {
    test: /iview\/.*?js$/,
    loader: 'babel-loader'
   },
   //js编译处理
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
   },
   //css处理
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     //minimize 启用压缩
     use: ['css-loader?minimize', 'autoprefixer-loader'],
     fallback: 'style-loader'
    })
   },
   //less处理
   {
    test: /\.less/,
    use: ExtractTextPlugin.extract({
     use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
     fallback: 'style-loader'
    })
   },
   //图片处理
   {
    test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
    loader: 'url-loader?limit=1024'
   },
   //实现资源复用
   {
    test: /\.(html|tpl)$/,
    loader: 'html-loader'
   }
  ]
 },
 resolve: {
  //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
  extensions: ['.js', '.vue'],
  //模块别名定义，方便后续直接引用别名，无须多写长长的地址
  alias: {
   'vue': 'vue/dist/vue.esm.js'
  }
 }
};

(2) Development environment configuration webpack.dev.config.js

//处理共用、通用的js
const webpack = require('webpack');
//处理html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//合并配置
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
//fs模块用于对系统文件及目录进行读写操作
const fs = require('fs');
//编译前用node生成一个env.js的文件，用来标明当前是开发（development）还是生产环境（production）
fs.open('./src/config/env.js', 'w', function(err, fd) {
 const buf = 'export default "development";';
 fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
});
module.exports = merge(webpackBaseConfig, {
 //打包代码的同时生成一个sourcemap文件，并在打包文件的末尾添加//# souceURL，注释会告诉JS引擎原始文件位置
 devtool: '#source-map',
 output: {
  //线上环境路径
  publicPath: '/dist/',
  filename: '[name].js',
  chunkFilename: '[name].chunk.js'
 },
 plugins: [
  //css单独打包
  new ExtractTextPlugin({
   filename: '[name].css',
   allChunks: true
  }),
  //通用模块编译
  new webpack.optimize.CommonsChunkPlugin({
   //提取的公共块的块名称（chunk）
   name: 'vendors',
   //生成的通用的文件名
   filename: 'vendors.js'
  }),
  new HtmlWebpackPlugin({
   //输出文件
   filename: '../index.html',
   //模板文件
   template: './src/template/index.ejs',
   //不插入生成的 js 文件，只是单纯的生成一个 html 文件
   inject: false
  })
 ]
});

(3) Online environment configuration webpack.prod.config.js

//处理共用、通用的js
const webpack = require('webpack');
//处理html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//合并配置
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
//fs模块用于对系统文件及目录进行读写操作
const fs = require('fs');
//编译前用node生成一个env.js的文件，用来标明当前是开发（development）还是生产环境（production）
fs.open('./src/config/env.js', 'w', function (err, fd) {
 const buf = 'export default "production";';
 fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
});
module.exports = merge(webpackBaseConfig, {
 output: {
  //线上环境路径
  publicPath: 'dist/',
  filename: '[name].[hash].js',
  chunkFilename: '[name].[hash].chunk.js'
 },
 plugins: [
  new ExtractTextPlugin({
   //css单独打包
   filename: '[name].[hash].css',
   allChunks: true
  }),
  //通用模块编译
  new webpack.optimize.CommonsChunkPlugin({
   //提取的公共块的块名称（chunk）
   name: 'vendors',
   //生成的通用的文件名
   filename: 'vendors.[hash].js'
  }),
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  //js压缩
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  }),
  new HtmlWebpackPlugin({
   //输出文件
   filename: '../index_prod.html',
   //模板文件
   template: './src/template/index.ejs',
   //不插入生成的 js 文件，只是单纯的生成一个 html 文件
   inject: false
  })
 ]
});

(4) package.json file

{
 "name": "iview-project",
 "version": "2.1.0",
 "description": "A base project with Vue.js2、Vue-Router、webpack2 and with iView2.",
 "main": "index.js",
 "scripts": {
 "init": "webpack --progress --config webpack.dev.config.js",
 "dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
 "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
 },
 "repository": {
 "type": "git",
 "url": "git+https://github.com/iview/iview-project.git"
 },
 "author": "Aresn",
 "license": "MIT",
 "dependencies": {
 "vue": "^2.2.6",
 "vue-router": "^2.2.1",
 "iview": "^2.0.0-rc.8"
 },
 "devDependencies": {
 "autoprefixer-loader": "^2.0.0",
 "babel": "^6.23.0",
 "babel-core": "^6.23.1",
 "babel-loader": "^6.2.4",
 "babel-plugin-transform-runtime": "^6.12.0",
 "babel-preset-es2015": "^6.9.0",
 "babel-runtime": "^6.11.6",
 "css-loader": "^0.23.1",
 "extract-text-webpack-plugin": "^2.0.0",
 "file-loader": "^0.8.5",
 "html-loader": "^0.3.0",
 "html-webpack-plugin": "^2.28.0",
 "less": "^2.7.1",
 "less-loader": "^2.2.3",
 "style-loader": "^0.13.1",
 "url-loader": "^0.5.7",
 "vue-hot-reload-api": "^1.3.3",
 "vue-html-loader": "^1.2.3",
 "vue-loader": "^11.0.0",
 "vue-style-loader": "^1.0.0",
 "vue-template-compiler": "^2.2.1",
 "webpack": "^2.2.1",
 "webpack-dev-server": "^2.4.1",
 "webpack-merge": "^3.0.0"
 },
 "bugs": {
 "url": "https://github.com/iview/iview-project/issues"
 },
 "homepage": "https://www.iviewui.com"
}

ps: Let’s see how to use webpack to package vue projects?

1. Install nodejs: Using webpack for packaging requires npm. npm (node ​​package manager) is the nodejs package manager and is used for node plug-in management (including installation, uninstallation, and management) dependencies, etc.), so you need to download and install nodejs first. After the installation is completed, use npm -v to check whether the installation is complete;

2. Install cnpm (this step is not necessary): because npm installs plug-ins from foreign websites. Downloaded from the Internet, due to network influence, it is easy for exceptions to occur. cnpm is a complete npmjs.org mirror. You can use this instead of the official version (read-only). The synchronization frequency is currently once every 10 minutes to ensure that it is as synchronized with the official service as possible. Use npm install -g cnpm --registry=https://registry.npm.taobao.org to install, and then you can use cnpm instead of npm;

3. Install vue-cli scaffolding globally, npm install -g vue-cli (install to the current directory without -g; install to the node directory of the system with -g), use vue -V to view after the installation is complete;

4. Create a new project based on the webpack template ( Download template); use vue init webpack my-project (project folder name); after a series of settings, a vue template will be downloaded;

5. cd my-project to enter the project folder; use the npm install command to install the dependencies in the package.json file. The relevant components will be downloaded according to the dependencies of the front-end project and stored in the node_modules folder of the project directory;

6. After installing the node_modules dependencies , use the command npm run dev to start the project (dev configuration is in the package.json file).

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement internationalization using Angular (detailed tutorial)

How to implement form validation using JQuery, what should be done specifically Do?

How to set up multiple Classes using Vue

The above is the detailed content of webpack packaging configuration (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!