Webpack入门教程

Webpack入门教程

1.官方网站： ​​是一个现代 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 (

7.index.tmpl.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(, 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://jianshu.com/p/42e11515c10f​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。