├── .babelrc
├── src
├── css
│ ├── blue.scss
│ └── style.css
├── images
│ ├── 20.png
│ └── coffee.png
├── two.js
├── index.template.html
├── index.js
└── hello.js
├── postcss.config.js
├── README.md
├── webpack.dev.js
├── webpack.prod.js
├── package.json
└── webpack.common.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env", "react"]
3 | }
--------------------------------------------------------------------------------
/src/css/blue.scss:
--------------------------------------------------------------------------------
1 | /* blue.scss */
2 | $blue: blue;
3 | body{
4 | color: $blue;
5 | }
--------------------------------------------------------------------------------
/src/images/20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chen-yulun/webpack-project/HEAD/src/images/20.png
--------------------------------------------------------------------------------
/src/images/coffee.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chen-yulun/webpack-project/HEAD/src/images/coffee.png
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | // postcss.config.js
2 | module.exports = {
3 | plugins: [
4 | require('autoprefixer')
5 | ]
6 | }
--------------------------------------------------------------------------------
/src/two.js:
--------------------------------------------------------------------------------
1 | // two.js
2 | function two() {
3 | let element = document.createElement('div');
4 | element.innerHTML = '我是第二个入口文件';
5 | return element;
6 | }
7 |
8 | document.getElementById('root').appendChild(two());
--------------------------------------------------------------------------------
/src/index.template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Here is Template
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | //index.js
2 | import './css/style.css'; // 导入css
3 | import './css/blue.scss'; // 导入scss
4 |
5 | import React from 'react';
6 | import {render} from 'react-dom';
7 | import Hello from './hello'; // 可省略.js后缀名
8 |
9 | render(, document.getElementById('root'));
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 前言
2 | 这是一个webpack4.x入门的完整例子，里面包含了常用的webpack配置实例，详细讲解可前往博客[webpack4.x最详细入门讲解](https://www.cnblogs.com/BetterMan-/p/9867642.html)
3 | # 安装依赖
4 | ```
5 | npm install
6 | ```
7 | # 项目打包
8 | ```
9 | npm run build
10 | ```
11 | # 项目运行
12 |
13 | ```
14 | npm run dev
15 | ```
16 |
--------------------------------------------------------------------------------
/src/hello.js:
--------------------------------------------------------------------------------
1 | // hello.js
2 | import React, {Component} from 'react'; // 这两个模块必须引入
3 |
4 | let name = 'Alans';
5 |
6 | export default class Hello extends Component{
7 | render() {
8 | return (
9 |
10 | {name}
11 |
12 | );
13 | }
14 | }
--------------------------------------------------------------------------------
/src/css/style.css:
--------------------------------------------------------------------------------
1 | /* style.css */
2 | body {
3 | background: url(../images/coffee.png) top right repeat-y;
4 | }
5 |
6 | #root div{
7 | width: 200px;
8 | margin-top: 50px;
9 | transform: rotate(45deg); /* 这个属性会产生前缀 */
10 | }
11 |
12 | .a{
13 | color: black;
14 | }
15 |
16 | .b{
17 | width: 50px;
18 | height: 50px;
19 | background: yellow;
20 | }
--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
1 | // webpack.dev.js
2 | const merge = require('webpack-merge'); // 引入webpack-merge功能模块
3 | const common = require('./webpack.common.js'); // 引入webpack.common.js
4 |
5 | module.exports = merge(common, { // 将webpack.common.js合并到当前文件
6 | devServer: {
7 | contentBase: "./dist", // 本地服务器所加载文件的目录
8 | port: "8088", // 设置端口号为8088
9 | inline: true, // 文件修改后实时刷新
10 | historyApiFallback: true, //不跳转
11 | hot: true //热加载
12 | }
13 | })
--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
1 | // webpack.prod.js
2 | const merge = require('webpack-merge');
3 | const common = require('./webpack.common.js');
4 | const CleanWebpackPlugin = require('clean-webpack-plugin'); // 引入CleanWebpackPlugin插件
5 |
6 | const path = require('path');
7 | const PurifyCssWebpack = require('purifycss-webpack'); // 引入PurifyCssWebpack插件
8 | const glob = require('glob'); // 引入glob模块,用于扫描全部html文件中所引用的css
9 |
10 | module.exports = merge(common, { // 将webpack.common.js合并到当前文件
11 | devtool: 'source-map', // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
12 | plugins: [
13 | new CleanWebpackPlugin(['dist']), // 所要清理的文件夹名称
14 | new PurifyCssWebpack({
15 | paths: glob.sync(path.join(__dirname, 'src/*.html')) // 同步扫描所有html文件中所引用的css
16 | })
17 | ]
18 | })
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "webpack --config webpack.prod.js --mode production",
8 | "dev": "webpack-dev-server --open --config webpack.dev.js --mode development"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "autoprefixer": "^9.3.1",
15 | "babel-core": "^6.26.3",
16 | "babel-loader": "^7.1.5",
17 | "babel-preset-env": "^1.7.0",
18 | "babel-preset-react": "^6.24.1",
19 | "clean-webpack-plugin": "^0.1.19",
20 | "css-loader": "^1.0.0",
21 | "extract-text-webpack-plugin": "^4.0.0-beta.0",
22 | "file-loader": "^2.0.0",
23 | "html-webpack-plugin": "^3.2.0",
24 | "node-sass": "^4.9.4",
25 | "postcss-loader": "^3.0.0",
26 | "purify-css": "^1.2.5",
27 | "purifycss-webpack": "^0.7.0",
28 | "sass-loader": "^7.1.0",
29 | "style-loader": "^0.23.1",
30 | "url-loader": "^1.1.2",
31 | "webpack": "^4.23.1",
32 | "webpack-cli": "^3.1.2",
33 | "webpack-dev-server": "^3.1.10",
34 | "webpack-merge": "^4.1.4"
35 | },
36 | "dependencies": {
37 | "react": "^16.6.0",
38 | "react-dom": "^16.6.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/webpack.common.js:
--------------------------------------------------------------------------------
1 | // webpack.common.js
2 | const path = require('path'); // 路径处理模块
3 | const webpack = require('webpack'); // 这个插件不需要安装，是基于webpack的，需要引入webpack模块
4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入HtmlWebpackPlugin插件
5 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
6 |
7 | module.exports = {
8 | entry: {
9 | index: path.join(__dirname, "/src/index.js"),
10 | two: path.join(__dirname, "/src/two.js")
11 | },
12 | output: {
13 | path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
14 | filename: "[name].js" //打包后输出文件的文件名
15 | },
16 | module: {
17 | rules: [
18 | {
19 | test: /\.css$/, // 正则匹配以.css结尾的文件
20 | use: ExtractTextPlugin.extract({
21 | fallback: 'style-loader',
22 | use: ['css-loader', 'postcss-loader'],
23 | publicPath: '../' // 给背景图片设置一个公共路径
24 | })
25 | },
26 | {
27 | test: /\.(png|jpg|svg|gif)$/,
28 | use: [
29 | {
30 | loader: 'url-loader',
31 | options: {
32 | limit: 1000, // 限制只有小于1kb的图片才转为base64，例子图片为1.47kb,所以不会被转化
33 | outputPath: 'images' // 设置打包后图片存放的文件夹名称
34 | }
35 | }
36 | ]
37 | },
38 | {
39 | test: /\.(scss|sass)$/, // 正则匹配以.scss和.sass结尾的文件
40 | use: ['style-loader', 'css-loader', 'sass-loader'] // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
41 | },
42 | { // jsx配置
43 | test: /(\.jsx|\.js)$/,
44 | use: { // 注意use选择如果有多项配置，可写成这种对象形式
45 | loader: "babel-loader"
46 | },
47 | exclude: /node_modules/ // 排除匹配node_modules模块
48 | }
49 | ]
50 | },
51 | plugins: [
52 | new webpack.BannerPlugin('版权所有，翻版必究'), // new一个插件的实例
53 | new HtmlWebpackPlugin({
54 | template: path.join(__dirname, "/src/index.template.html")// new一个这个插件的实例，并传入相关的参数
55 | }),
56 | new webpack.HotModuleReplacementPlugin(),
57 | new ExtractTextPlugin('css/index.css')
58 | ]
59 | }
--------------------------------------------------------------------------------