配置webpack的环境
全局安装
npm install webpack webpack-cli -g
本地安装 到具体项目文件
mkdir my-project
cd my-project
npm init -y //创建package.json文件
npm install webpack webpack-cli -D //安装webpack和webpack脚手架到项目配置文件
webpack默认配置文件：webpack.config.js
修改配置文件名字： webpack --config //也可以指定的配置文件名字如(webpack.config.dev.js)~~~~
//配置webpack.config.js 文件
const path = require('path')
module.exports = {
// 打包入口 支持字符串，对象, 数组
//默认值： ./src/index.js 需要注意的是webpack4.0以后将如何 文件设置为index.js
entry: './src/main.jsx',
// 打包的输出
// 默认值：./dist/main.js
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist') //打包好的静态目录文件
},
// webpack打包模式
// 取值：生产模式production 开发模式development none
// 默认值 production
mode: 'none',
// 配置loaders的
module: {
// 一个loader的配置项，就是一个对象，放在rules的数组中
rules: [
// 处理js
{
//说明需要loader处理的文件匹配规则
test: /\.(js|jsx)$/,
//说明使用的loader名字 同时也需要安装babel-loader依赖处理es6以上语法 npm install babel-loader @babel/core @babel/preset-env -D
因后面会用到jsx文件和react,再安装处理jsx语法的依赖包:npm install @babel/preset-react -D npm install react react-dom -S
loader: 'babel-loader'
},
//处理css文件 安装处理css文件依赖 npm install style-loader css-loader -D
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
//注意依赖顺序是从右边到左
},
// 处理sass 安装处理sass语法的依赖包 npm install style-loader css-loader sass-loader node-sass -D
{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
},
// 处理文件 安装依赖处理图片，字体文件 npm install url-loader file-loader -D
{
test: /\.(png|jpeg|gif|jpg|svg|ttf)$/,
// loader: 'file-loader'
loader: 'url-loader',
options: {
limit: 5
}
}
]
},
}
基本的配置依赖以完成,然后到项目文件夹里面继续 my-project,我这边是配置react文件和webpack一起使用 在项目内新建一个src文件夹 里面有 App.jsx main.jsx style.scss
### App.jsx
import React, {Component} from 'react'
import './style.scss'
export default class App extends Component{
render(){
return (
<div>
<h1>哟哟我心</h1>
</div>
)
}
}
### main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
ReactDOM.render(
<App/>,
document.querySelector('#root') //挂载到index.html文件下
)style.scss
body{
background-color: yellow;
background-image: url(./logo.png);
h1{
color: red;
}
}index.html文件 打包后输出渲染~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>注意由于项目使用了react和Babel,第一步就是配置.babelrc这个文件,放在项目根目录下,该文件用来设置转码规则和插件,具体设置如下
.babelrc文件
presets字段设定转码规则，官方提供以下的规则集,文章的上面已经分别安装了相应的依赖包
babel-preset-env
{
presets: [
'@babel/preset-env',
'@babel/preset-react',
],
//后期还可以预设一些插件
"plugins": []
}启动项目执行webpack指令,项目会在根目录下面打包生成dist文件夹,并且会生成通过webpack打包编译的文件 bundle.js
然后浏览器打开index.html 就OK了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。