Webpack入门教程

来源：互联网发布：软件开发合同范本下载编辑：程序博客网时间：2024/05/22 02:23

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

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

3.目录结构

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及相关插件即可运行

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

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

阅读全文

1 0