參考資料webpack指南
最近在學(xué)習(xí)webpack的一些資料的整理，免得自己日后忘記，現(xiàn)在寫一下開發(fā)的過程先。
首先裝一個(gè)node，node官網(wǎng)安裝教程就省略了
打開控制臺(tái)輸入生成文件夾并打開，初始化一下項(xiàng)目
mkdir demo1 && cd demo1.
npm init
然后裝一下webpack和webpack-dev-server ,webpack是打包工具，webpack-dev-server是基于webpack一個(gè)簡單的 web 服務(wù)器，并且能夠?qū)崟r(shí)重新加載。
我是建議你用cnpm國內(nèi)的鏡像站，裝起來飛快，畢竟墻外的東西有可能慢的要死
npm install --save-dev webpack? webpack-dev-server
不推薦全局安裝 webpack。這會(huì)將你項(xiàng)目中的 webpack 鎖定到指定版本，并且在使用不同的 webpack 版本的項(xiàng)目中，可能會(huì)導(dǎo)致構(gòu)建失敗。(來自webpack指南的建議)
接下來裝一下會(huì)用到的loader
html:?
????????html-loader（這個(gè)是用來解析html的，不過我一般很少用這個(gè)）
css:?
????????style-loader（webpack的樣式加載器 通過注入 style 標(biāo)簽引入樣式）?
????????css-loader （通過 webpack 配置，CLI或內(nèi)聯(lián)使用 loader）
????????less-loader （添加對(duì)LESS的支持）
????????less （LESS模塊）
????????postcss-loader （不想寫瀏覽器前綴你就老實(shí)加上吧）
????????autoprefixer （自動(dòng)添加萬惡之源瀏覽器前綴）
? ??????optimize-css-assets-webpack-plugin （壓縮css代碼）
js:
????????babel-core?
????????babel-loader
????????babel-preset-env （使你可以暢快使用ES 6 7 ...N的牛逼哄哄的JavaScript 的編譯器 支持，會(huì)幫你自動(dòng)將新版本的JavaScript編譯成瀏覽器認(rèn)識(shí)的樣子）
????????babel-plugin-transform-vue-jsx?
????????babel-helper-vue-jsx-merge-props （這兩個(gè)是vue-jsx的支持，不寫jsx可以不裝）? ??
? ??????uglifyjs-webpack-plugin （壓縮JS代碼的插件）
file:
? ? ? ? file-loader
????????url-loader （一般用來處理資源文件的loader）
vue:
????????vue （vue框架）
? ? ? ? vue-template-compiler
????????vue-loader （Vue 組件轉(zhuǎn)換為 JavaScript 模塊，各種特性，賊牛逼，感興趣就去看看vue-loader）
分類打包
html:
????????html-webpack-plugin
css:
????????extract-text-webpack-plugin
node_env
????????cross-env （提供一個(gè)設(shè)置環(huán)境變量的scripts，簡單點(diǎn)說就是你可以通過傳遞NODE_ENV告訴代碼你是開發(fā)環(huán)境還是生產(chǎn)環(huán)境）
npm i --save-dev?html-loader style-loader css-loader less-loader less postcss-loader autoprefixer optimize-css-assets-webpack-plugin babel-core babel-loader babel-preset-env babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props uglifyjs-webpack-plugin url-loader vue vue-loader html-webpack-plugin extract-text-webpack-plugin cross-env?clean-webpack-plugin? file-loader? vue-template-compiler 幫忙??
‘
在package.json里面的scripts中加入這個(gè)命令，加入之后你就不用老是敲又臭又長的命令行了，直接npm run dev/dist即可
"dist": "cross-env NODE_ENV=dist webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=dev webpack-dev-server --open"
寫一個(gè)webpack.config.js配置文件
首先我們把要用到的一些東西引入進(jìn)來
const path = require('path');//路徑
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入html-webpack-plugin 打包index.html
const CleanWebpackPlugin = require('clean-webpack-plugin');
//清理dist文件夾
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');
//打包樣式
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');//壓縮js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//壓縮css
const isDev = process.env.NODE_ENV === 'dev';//環(huán)境參數(shù)
先定義一個(gè)對(duì)象config
config = {
????????entry: {
????????????//entry 是入口起點(diǎn)，我們的資源文件通過此js進(jìn)行引入
????????????app: './src/js/index.js'
????????},
????????output: {
????????????//輸出文件
????????????filename: '[name].bundle.js',
????????????path: path.resolve(__dirname, 'dist')
????????},
????????plugins:[
????????????????????//配置插件
????????????????????new webpack.DefinePlugin({
????????????????????????'process.env':{
????????????????????????????NODE_ENV: isDev ? '"dev"' : '"dist"'//傳遞環(huán)境變量
????????????????????????}
????????????????}),
????????????????//生成index.html的插件
????????????????new HtmlWebpackPlugin({
????????????????????title:'123'
????????????????})
????????],
????????module:{
????????????//模塊參數(shù)
????????????rules:[
? ? ? ? ? ? ? ? //處理ES6.7....n和vue-jsx 這里還需要一個(gè).baelrc的文件來輸入配置
????????????????{
? ? ? ? ? ? ? ? ????????test: /(\.jsx|\.js)$/,
? ? ? ? ? ? ? ? ?????? use: {
? ? ? ? ? ? ? ? ? ? ?????? loader: "babel-loader"
? ? ? ? ? ? ? ? ?????? },
? ? ? ? ? ? ? ? ?????? exclude: /node_modules/
? ? ? ? ? ? ?????},
? ? ? ? ? ? ? ? //處理靜態(tài)資源文件 并輸出到imgaes目錄下
???????? ?????? {
???????????? ?????? test:/\.(gif|jpg|jpeg|png|svg)$/,
???????????? ?????? use:[
???????????????? ?????? 'url-loader?limit=10000&name=images/[name].[ext]'
? ? ? ? ? ? ? ?????? ]
??????? ?????? ?}
????????????]
????}
};
由于開發(fā)和生產(chǎn)環(huán)境的不同配置也需要不一樣，根據(jù)isDev來判斷，先來配置一下開發(fā)環(huán)境的代碼，這里要用 webpack-dev-server 來搭建一個(gè)簡單的web服務(wù)器。
處理css的時(shí)候一般在生產(chǎn)環(huán)境才把他們打包到一個(gè)css文件中，在開發(fā)環(huán)境直接讓它插在代碼中編譯起來更加快一點(diǎn)
// webpack-dev-server配置
config.devServer = {
????contentBase: "./dist",//本地服務(wù)器所加載的頁面所在的目錄 ????historyApiFallback: true,//不跳轉(zhuǎn) inline: true//實(shí)時(shí)刷新
};
config.devtool='inline-source-map';
//由于開發(fā)環(huán)境的代碼都會(huì)被打包到一個(gè)js中，我們添加一個(gè)source-map.方便你開發(fā) 的時(shí)候快速定位到代碼
config.plugins.push(
????new webpack.HotModuleReplacementPlugin(),
????//模塊熱替換
????new webpack.NoEmitOnErrorsPlugin()
????// 在編譯出現(xiàn)錯(cuò)誤時(shí)，使用?NoEmitOnErrorsPlugin?來跳過輸出階段。這樣可以確保輸出資源不會(huì)包含錯(cuò)誤
);
config.module.rules.push(
{
????????test:/\.less$/,
????????use:[
????????????'style-loader',
????????????'css-loader',
????????????'less-loader',
????????????{
????????????????loader:'postcss-loader',?????//代碼自動(dòng)補(bǔ)全，瀏覽器前綴添加
????????????????options: {
????????????????????????plugins:(loader) =>[ require('autoprefixer')({browsers :[' last 5 versions']}) ]
????????????????}
????????????}
????]
},
//處理.vue文件的loader
{
????test:/\.vue$/,
????use:[
????????{ ????
????????????loader:'vue-loader'
????????}
????]
}
)
配好開發(fā)環(huán)境后，還要配一下生產(chǎn)環(huán)境的代碼
config.entry = {
? ??app: path.join(__dirname,'./src/js/index.js'),
? ??vendor:['vue']????//聲明要抽離的類庫
}
config.module.rules.push(
{
? ??test:/\.less$/,
? ??use:extractTextWebpackPlugin.extract({
????????????//通過調(diào)用這個(gè)方法來把css從js代碼中提取出來
? ? ? ? ? ??fallback:'style-loader',
? ??????????use:[
? ??????????????'css-loader',
? ??????????????'less-loader',
? ??????????????{
? ??????????????????loader:'postcss-loader',
? ? ? ? ? ? ? ? ? ??options:{
? ??????????????????????plugins:(loader) =>[require('autoprefixer')({browsers :[' last 5 versions']})]
? ?????????????????????}
? ??????????????}
? ??????????]
? ??})
},
{
????test:/\.vue$/,
????use:[
????????{
????????????loader:'vue-loader',
????????????options: {
????????????????????extractCSS: true
????????????????}
? ? ? ? ?}
????]
}
);
config.plugins.push(
? ??new CleanWebpackPlugin(['dist']),????//清理打包文件夾
? ??new extractTextWebpackPlugin('styles.[contentHash:8].css'),????//輸出 styles.css文件
? ??new webpack.optimize.ModuleConcatenationPlugin(),
? ??new webpack.optimize.CommonsChunkPlugin({
????????//分離出類庫
? ?????name:'vendor'
? ??}),
? ? new OptimizeCssAssetsPlugin({ ????
????????//css壓縮
? ??????assetNameRegExp: /.css$/g,
? ??????cssProcessor: require('cssnano'),
? ? ? ? cssProcessorOptions: {
? ? ? ? ? ? discardComments: {
? ? ? ? ? ? ? ? removeAll: true
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? canPrint: true
? ? }),
? ??new webpack.optimize.CommonsChunkPlugin({
? ?????name:'runtime'
? ??}),
? ??new webpack.BannerPlugin('版權(quán)所有，翻版必究'),
? ??new UglifyJsPlugin({
????????//壓縮js代碼
? ??????test: /\.js($|\?)/i
? ??})
);
config.output.filename = 'js/[name].[chunkhash:8].js';????//定義輸出的js
這樣子配置算是寫完了最后再加一句
module.exports = config;
還有要配置一下 .babelrc文件，此文件跟webpack.config.js同級(jí)即可
{
? "presets": ["env"],
? "plugins": ["transform-vue-jsx"]
}
dist是打包之后的文件夾
src是你開發(fā)寫代碼的文件夾
寫到這里也就差不多了，下次再往里面配置一下express吧。
