目的：是為了分享一下使用過程中，用到的外掛程式、loader、遇到的各種問題以及解決辦法，最後會附上最終**。
安裝webpack,這裡不做詳細描述，直接去官網咖
在這個專案中，用webpack打包css、scss、js、檔案、jquery、第三方外掛程式、字型圖示，編譯es6、壓縮html、壓縮js、壓縮css，基本涵蓋了常用的東西。
**結構如下
下面單獨說幾個難點
1、打包多頁面，使用到的外掛程式是html-wepack-plugin，html-loader，也就是你有多少個頁面，就有多少個入口，也就寫多少個模版檔案。當然，頁面過多時，可以考慮遍歷處理。
//引入路徑外掛程式
const path = require('path');
//引入匯出html外掛程式
const htmlwebpackplugin = require('html-webpack-plugin');
const config =,
//出口
output:,
//2、單獨打包css，使用到的外掛程式extract-text-webpack-plugin，loader有style-loader、css-loader、sass-loader、node-sass，因為每個頁面要引入相對應的css檔案，所以，在js入口檔案裡通過require('./lawsearchhomepage.scss')引如對應的scss檔案，打包後css檔案會單獨打包，並通過link的形式引入html外掛程式plugins: [
//html單獨匯出外掛程式——首頁
newhtmlwebpackplugin(
}),//html單獨匯出外掛程式——列表頁
newhtmlwebpackplugin(
})]
}module.exports = config;
//3、處理es6，安裝babel、babel-loader@7（因為下面壓縮js，其他版本報錯）、babel-core、babel-preset-es2015（也是為了解決壓縮js報錯）引入匯出css外掛程式
const extracttextplugin = require('extract-text-webpack-plugin');
//loader)},
,)}//plugins
//將css單獨打包外掛程式
newextracttextplugin(),
//4、處理jquery，安裝expose-loaderloader
},
第一種方法可以通過在js裡require('expose-loader?$!jquery');引入jquery
第二種通過loader
//5、壓縮css，使用外掛程式optimize-css-assets-webpack-plugin，安裝cssnanoloader
,]},
//6、壓縮js，一般的情況下，js預設就是壓縮狀態，但是在壓縮完css後，js就不是壓縮的了，所以還是處理一下，編譯更快引入壓縮css的外掛程式
const optimizecss = require('optimize-css-assets-webpack-plugin');
//引入cssnano外掛程式
const cssnano = require('cssnano');
//plugins
plugins:[
newoptimizecss( },
canprint:
true
}),
],//
壓縮優化css,不寫這個css還是沒壓縮，不知道為啥
optimization: )]
},
用的外掛程式uglifyjs-webpack-plugin
//我的package.json中安裝的外掛程式引入js壓縮外掛程式
const uglifyjs = require('uglifyjs-webpack-plugin');
//plugins
new uglifyjs()
"devdependencies":webpack.config.js裡的**（完整版）
//如果在打包過程中報模組沒有定義錯誤，那就再安裝一次，實在不行，直接刪了node_modules檔案，重新npm install一下。引入路徑外掛程式
const path = require('path');
//引入匯出html外掛程式
const htmlwebpackplugin = require('html-webpack-plugin');
//引入清除外掛程式
const cleanwebpackplugin = require('clean-webpack-plugin');
//引入匯出css外掛程式
const extracttextplugin = require('extract-text-webpack-plugin');
//引入webpack
const webpack = require('webpack');
//引入壓縮css的外掛程式
const optimizecss = require('optimize-css-assets-webpack-plugin');
//引入cssnano外掛程式
const cssnano = require('cssnano');
//引入js壓縮外掛程式
const uglifyjs = require('uglifyjs-webpack-plugin');
//webpack配置內容
const config =,
//便於除錯
devtool:'inline-source-map',
//服務
devserver:,
//loader模組
module:
},,]},)
},,)},,
}},//字型圖示]},
//外掛程式
plugins: [
//清空build檔案下的多餘檔案
new cleanwebpackplugin(['build']),
//將css單獨打包外掛程式
newextracttextplugin(),
//html單獨匯出外掛程式——首頁
newhtmlwebpackplugin(
}),//html單獨匯出外掛程式——列表頁
newhtmlwebpackplugin(
}),//壓縮css
newoptimizecss( },
canprint:
true
}),
//壓縮js
newuglifyjs()
],//壓縮優化css
optimization: )]
},//出口
output:
}module.exports = config;
Sublime Text2搭建Sass編輯環境
2.用package control安裝如下外掛程式 sass sass build 3.為了對中文的支援，安裝convert to utf 8外掛程式。同時sublime text2不支援中文編譯路徑，在它的安裝目錄下有乙個檔案sublime plugin.py。新增 reload sys sys...
windows 下搭建安裝 sass
眾所周知，sass 解析需要有 ruby 的支撐，所以，第一步 第二步 安裝 ruby 在安裝 ruby 過程中需要注意的一點 把 ruby 執行檔案新增到 path，勾選這兩項即可 安裝完畢後開啟 cmd，執行 gem v，如果成功列印出版本號，就表示安裝成功了。第三步 安裝 sass 在 cmd...
Angular6 前端搭建
本次開發使用angular6結合ng zorro完成前端的開發。本次組內的前端由我來搭建。本次搭建過程是在前輩的基礎上做的，所以有一些可以復用的功能為本次搭建節省了很多的時間，不過這個學習的過程還是很寶貴的。1 angular開發使用,目前實踐典型專案有itoo pc端 physical pc端。2...