本文主要介紹MAC上webpack的基礎(chǔ)配置操作，有一定的參考意義，感興趣的同學(xué)可以借鑒。
江湖上人稱(chēng)“模塊打包機(jī)”的webpack可以讓我們?cè)谌粘Ｔ燧喿拥倪^(guò)程更加的便利，例如es5和es6語(yǔ)法的轉(zhuǎn)換，sass文件與css文件的轉(zhuǎn)換，自動(dòng)處理瀏覽器前綴等等，webpack讓我們的工作變得‘工程化’。接下來(lái)我們就來(lái)介紹一下這些功能的基礎(chǔ)配置。
一·安裝webpack
1.首先我們創(chuàng)建一個(gè)webpack-demo文件來(lái)進(jìn)行本次教程
mkdir webpack-demo
2.進(jìn)入webpack官網(wǎng)，參考官網(wǎng)配置教程
3.我們看到有兩個(gè)安裝命令，一個(gè)是npm 一個(gè)是yarn(任選一個(gè))，這里采用局部安裝,在webpack-demo目錄下執(zhí)行下列任意一個(gè)命令,安裝成功后自動(dòng)回到webpack-demo目錄
npm install --save-dev webpack
yarn add webpack --dev
3.點(diǎn)擊官網(wǎng)上的get start，進(jìn)入配置教程，我們需要在目錄里添加以下文件
劃重點(diǎn)：這里的src文件下通常存放我們的未編譯的代碼，dist目錄下存放要發(fā)布的代碼
如果目錄里沒(méi)有package.json，可以通過(guò) npm i這個(gè)命令來(lái)添加
4.按照以下內(nèi)容，添加到webpack.config.js文件，這個(gè)配置文件會(huì)將src/index.js文件編譯之后存放到dist/bundle.js文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
5.我們?cè)趇ndex.js文件內(nèi)輸入以下內(nèi)容作為測(cè)試
let a= 0;
console.log(1)
6.執(zhí)行npx webpack這個(gè)命令，因?yàn)槭蔷植堪惭b，這個(gè)命令會(huì)找到本地webpack然后執(zhí)行，然后打開(kāi)dist/bundle.js文件。如果看到index.js里添加的語(yǔ)句寫(xiě)到了dist/bundle.js文件，那么恭喜你，webpack安裝成功了。
二·babel安裝
1.搜索關(guān)鍵字babel-loader，進(jìn)入官網(wǎng)安裝
2.注意：
官網(wǎng)上給出了版本搭配，大家不要安裝錯(cuò)誤了，這里我選擇的是babel6+babel-loader7的版本
3.點(diǎn)擊進(jìn)入babel-loader-7，在weback-demo目錄下執(zhí)行以下命令：
npm install --save-dev babel-loader babel-core babel-preset-env webpack
4.添加配置，添加到webpack.config.js文件中
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
5.執(zhí)行npx webpack,打開(kāi)bundle.js文件，我們看到
let a = 0; ===翻譯成了===> var a =0;
恭喜你，babel也配置成功了。
三·文件工程化
1.為了真正的實(shí)現(xiàn)工程化，我們先修改一下目錄結(jié)構(gòu)：
在src文件下創(chuàng)建js文件夾，添加app.js module-1.js module-2.js三個(gè)文件，同時(shí)也修改一下webpack配置文件，將./src/js/app.js編譯后的bundle.js放到dist/js目錄下。
const path = require('path');
module.exports = {
entry: './src/js/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/js')
}
};
2.編輯js文件：
mdule-1.js和mdule-2.js文件在這里作為兩個(gè)函數(shù)文件，供給app.js調(diào)用
首先編輯一下mdule-1.js文件:
function fn(){
console.log(1)
}
export default fn//默認(rèn)訪問(wèn)文件時(shí)傳出fn函數(shù)
mdule-2.js文件:
function fn(){
console.log(1)
}
export default fn
app.js文件：
import fn1 from './module-1'
import fn2 from './module-2'
fn1()
console.log('hello webpack')
fn2()
3.編輯html文件：
src/index.html:同時(shí)將這個(gè)html文件拷貝到dist目錄下
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>hello webpack</p>
<script src="./js/bundle.js"></script>
<!-- 模塊化 -->
</body>
</html>
4.執(zhí)行npx webpack，可以看到三個(gè)js文件都被編譯到了bundle.js中
5.運(yùn)行dist/index.html，可以看到控制臺(tái)中打了一下信息：
到此，我們也實(shí)現(xiàn)了簡(jiǎn)單的工程化
四·安裝sass
1.首先我們需要添加scss文件，存放到src/css目錄下
touch src/css/main.scss
2.搜索sass-loader，點(diǎn)擊進(jìn)入官網(wǎng)
3.根據(jù)官網(wǎng)配置進(jìn)行安裝
npm install sass-loader node-sass webpack --save-dev
劃重點(diǎn)：但是官網(wǎng)有時(shí)候也是不靠譜的呀，我們還需要安裝以下幾個(gè)腳本，不信的話你試試，會(huì)報(bào)錯(cuò)的哦
npm i style-loader css-loader
4.添加配置到webpack.config.js
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
};
5../css/main.scss中添加樣式
body{
background: #dddddd;
p{
color: red;
}
}
6.在app.js上添加css導(dǎo)入
import '../css/main.scss'
7.執(zhí)行npx webpack,打開(kāi)dist/index.html，可以看到樣式生效了
scss文件被翻譯成css語(yǔ)法后會(huì)在頁(yè)面自動(dòng)添加style標(biāo)簽，將css部分放在標(biāo)簽里
五·安裝autoprefixer
1.首先我們?cè)趕css文件中添加：
display:flex;
2.搜索postcss-loader，點(diǎn)擊進(jìn)入官網(wǎng)
3.按照官網(wǎng)的配置 安裝
npm i -D postcss-loader
3.配置文件到postcss.config.js
注意：我們需要新增一個(gè)postcss.config.js文件，然后進(jìn)行配置
module.exports = {
plugins: {
'postcss-cssnext': {},
}
}
4.配置文件到webpack.config.js
module: {
rules: [
.......
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader", // translates CSS into CommonJS
options: { importLoaders: 1 }在sass文件的配置處添加
}, {
loader: 'postcss-loader' // 在sass文件的配置處添加
},{
loader: "sass-loader" // compiles Sass to CSS
}]
}
]
}
5.運(yùn)行npx webpack，遇到一個(gè)報(bào)錯(cuò)
Cannot find module 'extract-text-webpack-plugin'
不要緊張，我們根據(jù)提示來(lái)安裝腳本
npm i extract-text-webpack-plugin
這時(shí)候還會(huì)遇到一個(gè)報(bào)錯(cuò)
Cannot find module 'postcss-cssnext'
套路，安裝腳本
npm i postcss-cssnext
安裝結(jié)束后，我們?cè)俅芜\(yùn)行npx webpack，這個(gè)時(shí)候就沒(méi)有任何報(bào)錯(cuò)了
6.打開(kāi)dist/index.html，如果安裝成功，就可以看到自動(dòng)添加了瀏覽器前綴
附上本次配置的demo
以上是本次的webpack配置教程，如果在安裝過(guò)程中有問(wèn)題歡迎留言。
