(二)、JS打包工具使用(持續學習更新ing……)
阿新 • • 發佈:2018-12-29
一、webpack 打包工具
1. webpack 概念引入
[待完善]
2. webpack 命令使用及相關工具包
1. webpack 安裝和打包命令: $ npm i webpack --save-dev $ webpack [source] [destination] 2. webpack 熱部署工具安裝和使用命令: $ npm i webpack-dev-server --save-dev //安裝 $ webpack-dev-derver --open --port [port] --contentBase [content] --hot --open //自動開啟瀏覽器 --port //指定埠號 --contentBase //指定根目錄 --hot //開啟熱部署 3. webpack 需要的第三方包: $ npm i vue-loader vue-template-complier $ npm i babel-core babel-loader babel-plugin-transform-runtime $ npm i babel-preset-env babel-preset-stage-0 $ npm i $ npm i $ npm i
3. webpack 配置檔案模板
//webpack.config.js: const path = require('path'); const webpack = require('webpack'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: path.join(__dirname, './src/main.js'), //入口檔案 output: { //指定輸出項 path: path.join(__dirname, './dist'), //輸出路徑 filename: 'bundle.js' //指定輸出檔名 }, plugins: [ new webpack.HotModuleReplacementPlugin(), //配置熱部署 new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), //指定模板檔案路徑 filename: 'index.html' //指定瀏覽器開啟的檔名 }) ], module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //處理.css檔案的loader { test: /\.css$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //處理.less檔案的loader { test: /\.css$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //處理.scss的loader { test: /\.(jpg|png|gif|jpeg|bmp)$/, use: 'url-loader?limit=[limit]&name=[hash:num]-[name].[ext]' }, //處理圖片的loader { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, //處理字型的loader { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置babel轉換高階的ES語法 { test: /\.vue$/, use: 'vue-loader' }, //處理.vue檔案的loader ] }, resolve: { "alias": { "vue$": "vue/dist/vue.js" } } };
4. webpack 常用外掛
[待完善]
5. webpack 配置module.rules
[待完善]