本文主要介绍MAC上webpack的基础配置操作，有一定的参考意义，感兴趣的同学可以借鉴。
江湖上人称“模块打包机”的webpack可以让我们在日常造轮子的过程更加的便利，例如es5和es6语法的转换，sass文件与css文件的转换，自动处理浏览器前缀等等，webpack让我们的工作变得‘工程化’。接下来我们就来介绍一下这些功能的基础配置。
一·安装webpack
1.首先我们创建一个webpack-demo文件来进行本次教程
mkdir webpack-demo
2.进入webpack官网，参考官网配置教程
3.我们看到有两个安装命令，一个是npm 一个是yarn(任选一个)，这里采用局部安装,在webpack-demo目录下执行下列任意一个命令,安装成功后自动回到webpack-demo目录
npm install --save-dev webpack
yarn add webpack --dev
3.点击官网上的get start，进入配置教程，我们需要在目录里添加以下文件
划重点：这里的src文件下通常存放我们的未编译的代码，dist目录下存放要发布的代码
如果目录里没有package.json，可以通过 npm i这个命令来添加
4.按照以下内容，添加到webpack.config.js文件，这个配置文件会将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.我们在index.js文件内输入以下内容作为测试
let a= 0;
console.log(1)
6.执行npx webpack这个命令，因为是局部安装，这个命令会找到本地webpack然后执行，然后打开dist/bundle.js文件。如果看到index.js里添加的语句写到了dist/bundle.js文件，那么恭喜你，webpack安装成功了。
二·babel安装
1.搜索关键字babel-loader，进入官网安装
2.注意：
官网上给出了版本搭配，大家不要安装错误了，这里我选择的是babel6+babel-loader7的版本
image.png
3.点击进入babel-loader-7，在weback-demo目录下执行以下命令：
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.执行npx webpack,打开bundle.js文件，我们看到
let a = 0; ===翻译成了===> var a =0;
恭喜你，babel也配置成功了。
三·文件工程化
1.为了真正的实现工程化，我们先修改一下目录结构：
在src文件下创建js文件夹，添加app.js module-1.js module-2.js三个文件，同时也修改一下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文件在这里作为两个函数文件，供给app.js调用
首先编辑一下mdule-1.js文件:
function fn(){
console.log(1)
}
export default fn//默认访问文件时传出fn函数
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:同时将这个html文件拷贝到dist目录下
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>hello webpack</p>
<script src="./js/bundle.js"></script>
<!-- 模块化 -->
</body>
</html>
4.执行npx webpack，可以看到三个js文件都被编译到了bundle.js中
image.png
5.运行dist/index.html，可以看到控制台中打了一下信息：
image.png
到此，我们也实现了简单的工程化
四·安装sass
1.首先我们需要添加scss文件，存放到src/css目录下
touch src/css/main.scss
2.搜索sass-loader，点击进入官网
3.根据官网配置进行安装
npm install sass-loader node-sass webpack --save-dev
划重点：但是官网有时候也是不靠谱的呀，我们还需要安装以下几个脚本，不信的话你试试，会报错的哦
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导入
import '../css/main.scss'
7.执行npx webpack,打开dist/index.html，可以看到样式生效了
scss文件被翻译成css语法后会在页面自动添加style标签，将css部分放在标签里
image.png
五·安装autoprefixer
1.首先我们在scss文件中添加：
display:flex;
2.搜索postcss-loader，点击进入官网
3.按照官网的配置 安装
npm i -D postcss-loader
3.配置文件到postcss.config.js
注意：我们需要新增一个postcss.config.js文件，然后进行配置
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.运行npx webpack，遇到一个报错
Cannot find module 'extract-text-webpack-plugin'
不要紧张，我们根据提示来安装脚本
npm i extract-text-webpack-plugin
这时候还会遇到一个报错
Cannot find module 'postcss-cssnext'
套路，安装脚本
npm i postcss-cssnext
安装结束后，我们再次运行npx webpack，这个时候就没有任何报错了
6.打开dist/index.html，如果安装成功，就可以看到自动添加了浏览器前缀
image.png
附上本次配置的demo
以上是本次的webpack配置教程，如果在安装过程中有问题欢迎留言。
网友评论