Konfiguration der Webpack-Verpackung (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Webpack-Paketkonfiguration für Vue-Projektvorlagen vorgestellt

1 > Github-Adresse: https://github.com/MengFangui/VueProjectTemplate

2. Webpack-Konfiguration

(1) Grundkonfiguration des Webpacks. 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) Entwicklungsumgebungskonfiguration 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-Umgebungskonfiguration 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-Datei

{
 "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: Mal sehen, wie man Webpack zum Verpacken von Vue-Projekten verwendet?

1. Installieren Sie NodeJS: Die Verwendung von Webpack zum Verpacken erfordert npm. NPM (Node-Paketmanager) ist der NodeJS-Paketmanager und wird für die Node-Plug-In-Verwaltung verwendet. Deinstallation und Verwaltung) Abhängigkeiten usw.), daher müssen Sie zuerst nodejs herunterladen und installieren. Verwenden Sie nach Abschluss der Installation npm -v, um zu überprüfen, ob die Installation abgeschlossen ist. 2. Installieren Sie cnpm (. Dieser Schritt ist nicht erforderlich): Da npm Plug-Ins von fremden Websites installiert, kann es aufgrund des Netzwerkeinflusses leicht zu Ausnahmen kommen. cnpm ist ein vollständiger npmjs.org-Spiegel Offizielle Version (schreibgeschützt). Die Synchronisierungsfrequenz beträgt derzeit alle 10 Minuten, um eine größtmögliche Synchronisierung mit dem offiziellen Dienst zu gewährleisten. Verwenden Sie zum Installieren npm install -g cnpm --registry=https://registry.npm.taobao.org. Anschließend können Sie cnpm anstelle von npm verwenden.

3. Installieren Sie vue-cli scaffolding global install -g vue-cli (im aktuellen Verzeichnis installieren, ohne -g hinzuzufügen; nach Abschluss der Installation im Knotenverzeichnis des Systems installieren, um

4 anzuzeigen). Erstellen Sie ein neues Projekt basierend auf der Webpack-Vorlage (Vorlage herunterladen). Nach einer Reihe von Einstellungen wird eine Vue-CD heruntergeladen -project, um den Projektordner einzugeben; verwenden Sie den Befehl npm install, um die Abhängigkeiten in der Datei package.json zu installieren. Die relevanten Komponenten werden entsprechend den Abhängigkeiten des Front-End-Projekts heruntergeladen und im Ordner node_modules des Projektverzeichnisses gespeichert ;

6. Nach der Installation der node_modules-Abhängigkeiten verwenden Sie den Befehl npm run dev, um das Projekt zu starten (dev-Konfiguration befindet sich in der Datei package.json).

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Internationalisierung mit Angular (ausführliches Tutorial)

Wie implementiert man die Formularvalidierung mit JQuery, was sollte konkret gemacht werden?

So richten Sie mehrere Klassen mit Vue ein

Das obige ist der detaillierte Inhalt vonKonfiguration der Webpack-Verpackung (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!