Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
需要安装webpack、sass-loader(将scss翻译成css)、babel-loader(将ES5语法转成ES6，适配IE)、postcss-loader(css自动加上前缀)等。
一、安装webpack
搜索关键字：webpack github
找到资源
webpack github
点击链接webpack进入
1. 安装
使用npm：
npm install --save-dev webpack
或者是yarn：
yarn add webpack --dev
2. 找到Get Start
Get Start
点击Get Start进入操作。
- 新建一个文件夹，进入文件夹，
npm init创建一个合法的package.json文件，再安装webpack和webpack-cli。
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
-
确保你有一个这样目录的项目
project
src/index.js：
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html：
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
以上就安装好了webpack，详细的配置可以看链接。
如果后期运行npx webpack时，要你安装webpack-cli，那就按照它说的安装，用yarn比其他的要快很多：yarn add -D webpack-cli。
【注意：如果你安装的是webpack4】
出现如下报错：
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for thisvalue. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
原因是没有指定mode 导致的 .
解决方法：
- package.json中设置：
"scripts": {
"dev": "webpack --mode development", // 开发环境
"build": "webpack --mode production", // 生产环境
}
- webpack.config.js中设置：
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
mode: 'development' // 设置mode
}
二、安装sass-loader
搜索关键字： webpack sass github
找到资源：
sass-loader
点击链接sass-loader进入，找到Getting Started。
- 安装sass-loader
npm install sass-loader sass webpack --save-dev
- 在app.js中引入scss文件
import './style.scss';
style.scss的内容为：
$body-color: red;
body {
color: $body-color;
}
- 在项目根目录创建一个webpack.config.js文件
内容为：
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
};
如果项目中已经存在这个文件，那就直接添加代码就行了。
此时已经安装好了sass-loader，用npx webpack验证安装是否完成，系统会提示安装style-loader和css-loader，那就使用命令npm install style-loader和npm install css-loader（yarn add style-loader也是一样的）就可以了。
三、安装babel-loader
搜索关键字： webpack babel-loader github
找到资源：
babel-loader
点击链接babel-loader进入。
- 【需要注意这句话】
版本更新节点出现的问题
如果你的webpack版本是4.x，那么你就直接按照接下来的提示走，如果你的webpack版本是3.x，那么你就点击链接7.x branch。最新安装的版本基本都是4.x，我的webpack版本也是4.x的，所以以4.x版本为例。 - 安装babel-loader
首先写的很清楚，关于版本。
webpack 1.x | babel-loader <= 6.x
webpack 2.x | babel-loader >= 7.x (recommended) (^6.2.10 will also work, but with deprecation warnings)
webpack 3.x | babel-loader >= 7.1
如果你是以上三种情况的话，那么可以使用yarn或者是npm安装。
yarn add babel-loader babel-core babel-preset-env webpack --dev
or
npm install --save-dev babel-loader babel-core babel-preset-env webpack
- 找到Usage，开始使用。新建或者直接添加在
webpack.config.js文件中。
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
就可以使用了，用npx webpack验证安装是否完成，如果出现报错说什么文件找不到，那么我们就npm install它。
四、安装postcss-loader
自动加前缀功能，本来是叫做autoprefixer，那么搜索关键字： webpack autoprefixer github
出现资源
autoprefixer-loader
点击链接autoprefixer进入。
【重点注意】
autoprefixer已弃用
表示autoprefixer已经弃用，那么我们根据提示，采用
postcss-loder。点击链接postcss-loader进入操作。
- 安装postcss-loader
npm install --save-dev postcss-loader postcss
- 有两种使用方式
- 第一种：新建
webpack.config.js文件或者直接添加
内容：
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env',
{
// Options
},
],
},
},
},
],
},
],
},
};
- 第二种，新建一个
postcss.config.js文件
内容为：
module.exports = {
plugins: [
[
'postcss-preset-env',
{
// Options
},
],
],
};
webpack.config.js中添加
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
};
就可以使用了，用npx webpack验证安装是否完成，如果出现报错说什么文件找不到，那么我们就npm install它。
网友评论