Webpack入门教程

Posted 2022-08-07 徐同保的博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack入门教程相关的知识，希望对你有一定的参考价值。

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

3.目录结构

Webpack入门教程_json

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

Webpack入门教程_css_03

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

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

以上是关于Webpack入门教程的主要内容，如果未能解决你的问题，请参考以下文章