Webpack入门教程

程序员文章站 2022-06-15 10:55:39

...

2.简单介绍：webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应
用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个
模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

3.目录结构

Webpack入门教程

4.config.json

{
  "greetText": "Hello World!123"
}

5.Greeter.css

.root {
    background-color: #eee;
    padding: 10px;
    border: 3px solid #ccc;
    color: #00ad36;
}

6.Greeter.js

import React, {Component} from 'react'
import config from './config.json';
import styles from './Greeter.css';

class Greeter extends Component {
    render() {
        return (
            <div className={styles.root}>
                {config.greetText}
            </div>
        );
    }
}

export default Greeter

7.index.tmpl.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack Sample Project</title>
</head>
<body>
    <div id="root">
    </div>
</body>
</html>

8.main.css

html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
    padding: 0;
}

9.main.js

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

import './main.css';

render(<Greeter/>, document.getElementById('root'));

10.public文件件以及文件里的内容都不自己创建的，是Weppack自动生成的

11. .babelrc

{
  "presets": ["react", "es2015"],
  "env": {
    "devlopment" : {
      "plugins": [["react-transform", {
        "transforms": [{
          "transforms": "react-transform-hmr",

          "imports": ["react"],

          "locals": ["module"]
        }]
      }]]
    }
  }
}

12.package-lock.json是Webpack自己生成的

13.package.json

{
  "name": "mydemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.5.6"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.4",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "postcss-loader": "^2.0.6",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.18.2",
    "webpack-dev-server": "^2.7.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },
  "author": "xu",
  "license": "ISC"
}

14.postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

15.webpack.config.js

const webpack= require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + "/app/main.js",   //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",  //打包后的文件存放的地方 " +
        filename: "bundle.js"  //打包后输出文件的文件名
    },
    devServer: {
        contentBase: './public',
        historyApiFallback: true,
        inline: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

16.建立好上面目录结构，并安装好Webpack及相关插件即可运行

Webpack入门教程