欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Webpack入门教程

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

1.官方网站: https://doc.webpack-china.org/  


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入门教程


Webpack入门教程


17.也可以直接从github上下载我编写的代码工程:https://github.com/xutongbao/mywebpack 


18.参考链接:http://www.jianshu.com/p/42e11515c10f