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