package.json
{
"name": "arkabat",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack",
"build": "webpack-dev-server --content-base build --inline --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "6.24.1",
"css-loader": "0.28.8",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-webpack-plugin": "2.30.1",
"sass-loader": "6.0.6",
"style-loader": "0.19.1",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"font-awesome": "^4.7.0",
"react": "16.2.0",
"react-dom": "16.2.0"
}
}
webpack.config.js
var webpack=require("webpack");
var path=require("path");
//帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。
var HtmlWebpackPlugin=require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config={
// __dirname nodejs获取路径的一个解决方案
entry:'./app/app.jsx',
// 出口文件没有创建，定义就行了，所以定义对象形式的
output: {
// path指向的是路径
path: __dirname+'/build',
// 文件名字
filename: 'app.js'
},
//定义各种对象
module: {
//模块
rules: [
{
test: /.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react']
}
}
},
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}),
},
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","sass-loader"]
}),
},
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'resource/[name].[ext]'
}
}
]
},
{
test: /.(eot|svg|ttf|woff|woff2|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'resource/[name].[ext]'
}
}
]
}
]
},
plugins: [
//帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。
new HtmlWebpackPlugin({
template:'./app/index.html'
}),
new ExtractTextPlugin("css/[name].css"),
new webpack.optimize.CommonsChunkPlugin({
name:'common',
filename:'js/base.js'
})
],
devServer: {
contentbase:'dist'
}
}
module.exports = config;
帮助
优点：模块化
在webpack看来一切都是模块！这就是它不可不说的优点，包括你的Javascript代码，
也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
app文件夹：源码文件夹
app.js是入口文件
bundle文件夹是编译之后的文件夹
bundle.js编译出来的文件
app.js的作用引入模块化的js文件
使用webpack编译
命令：webpack 入口文件 出口文件
__dirname nodejs获取路径的一个解决方案
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start":"webpack",
"build":"webpack-dev-server"
},
npm start
npm run build
启动webpack服务器 访问根目录(路径) build(首页，根) 热更新
webpack-dev-server--content-base build --inline --hot
二、webpack-pulgins
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。
1、如何使用插件？
该插件的作用是依据一个简单的模板，帮你生成最终的Html5文件，
这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。
//安装
npm install --save-dev html-webpack-pugin
yarn add font-awesome //安装font-awsome
