|
模塊化：AMD、CMD,、commonJS,、ES6等模塊化 export:導(dǎo)出 import:導(dǎo)入
webpack： 安裝使用 ： npm install [email protected] --save-dev 配置文件,，設(shè)置打包出入口 npm init 初始化生成backpack. json文件并映射webpack命令 （所有具體配置官網(wǎng)可查 webpack.js. org中點(diǎn)擊loader） css配置：npm install style.loader --save-dev npm install css.loader --save-dev 在配置文件中添加對(duì)應(yīng)moudel less配置: npm install less.loader --save-dev 在配置文件中添加對(duì)應(yīng)moudel（需要依賴css配置） url配置: npm install file.loader --save -dev npm install url.loader --save-dev 在配置文件中添加對(duì)應(yīng)moudel（limit值以下的轉(zhuǎn)化為base64編碼） ES6配置: npm install -D babel-loader @babel/core @babel/preset-env webpack 在配置文件中添加對(duì)應(yīng)moudel 本地server配置： npm install [email protected] --save-dev(webpack3.6.0對(duì)應(yīng)server2.9.3) 在配置為文件中添加devServer 服務(wù)器配置 vue配置: npm install vue 解決版本為runtime不可用問(wèn)題: 在配置文件中添加resolves{ Alisa{”$vue”: vue.e sm.js的路徑}} 插件：html-webpack-plugin(生成html)、uglifyjs-webpack-plugin(壓縮代碼) 配置分離：npm install webpack-merge --save-dev 分理成生產(chǎn)和發(fā)布,、基礎(chǔ)三個(gè)配置文件
配置文件信息： 1 const path = require("path"); 2 const webpack = require("webpack"); 3 const HtmlWebpackPlugin = require("html-webpack-plugin"); 4 const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin"); 5 6 module.exports = { 7 //入口 8 entry: "./src/bbb.js", 9 //出口 10 output: { 11 path: path.resolve(__dirname,"dist"), 12 filename: "main.js", 13 /* publicPath: "dist/"*/ 14 }, 15 //loader 16 module: { 17 rules: [ 18 //css 19 { 20 test: /\.css$/i, 21 //使用多個(gè)loader,從右向左讀取 22 //style.loader:樣式添加到dom 23 //css.loader:加載scc文件 24 use: ["style-loader", "css-loader"], 25 }, 26 //less 27 { 28 test: /\.less$/, 29 use: [{ 30 loader: "style-loader" // creates style nodes from JS strings 31 }, { 32 loader: "css-loader" // translates CSS into CommonJS 33 }, { 34 loader: "less-loader" // compiles Less to CSS 35 } 36 ]}, 37 //img 38 { 39 test: /\.(png|jpg|gif|jpeg)$/i, 40 use: [ 41 { 42 loader: 'url-loader', 43 options: { 44 limit: 10000, 45 name: 'img/[name].[ext]', 46 }, 47 }, 48 ]}, 49 //ES6 50 { 51 test: /\.m?js$/, 52 //排除 53 exclude: /(node_modules|bower_components)/, 54 use: { 55 loader: 'babel-loader', 56 options: { 57 //預(yù)設(shè) 58 presets: ['@babel/preset-env'] 59 } 60 } 61 }, 62 //vue 63 { 64 test:/\.vue$/, 65 use: ["vue-loader"] 66 } 67 ], 68 }, 69 //當(dāng)import vue時(shí)指定文件（指定版本） 70 resolve:{ 71 alias:{ 72 "vue$": "vue/dist/vue.esm.js" 73 } 74 }, 75 //插件 76 plugins:[ 77 //添加版權(quán)信息 78 new webpack.BannerPlugin("最終版權(quán)歸zhaopan所有"), 79 //生成html插件 80 new HtmlWebpackPlugin({ 81 template:"index.html" 82 }), 83 //壓縮插件 會(huì)把版權(quán)注釋等都刪除 84 /*new UglifyjsWebpackPlugin(),*/ 85 ], 86 //本地服務(wù)器 87 devServer:{ 88 contentBase: "./dist", 89 inline: true,//熱部署 90 /* host: 1997*/ 91 } 92 }
配置版本信息：
|
|
|
