自我总结的一套webpack，前端变化异常迅猛，都是眼泪。不愿意把记忆力全部用来记环境配置，所以记录方法过程。
不配置webpack连github优秀的轮子都用不了，吐槽一下。
我对webpack的理解源于三篇文章
- 1.简书快速入门（推荐）：http://www.jianshu.com/p/42e11515c10f
- 2.知乎（推荐）：https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazine
- 3.中文介绍文档：http://webpackdoc.com/module-system.html
运行 webpack 出错：Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
原理是 装全局的 webpack，会出现路径错误。 悲催0 0
项目目录下，删除全局，下载一个项目的。
npm remove webpack -g
npm i webpack --save-dev
//终端报错 HtmlwebpackPlugin模块的报错
Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.
configuration has an unknown property 'colors'. These properties are valid:
//这个配置删除了colors: true,//终端中输出结果为彩色
- webpack简单点来说就就是一个配置文件，所有的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块
- entry 入口文件 让webpack用哪个文件作为项目的入口
- output 出口 让webpack把处理完成的文件放在哪里
- module 模块 要用什么不同的模块来处理各种类型的文件
正文开始
//新建一个文件，就是项目的根文件
npm init //配置一些package.json 包管理模块
// 安装Webpack
npm install --save-dev webpack
现在项目里面就有一个package.json， 我们多加一点东西，慢慢丰富它的内容。
- /app
- index.js
- sub.js
- indexhtml.html
- package.json
- webpack.config.js
JS代码
sub.js
//我们这里使用CommonJS的风格
function generateText() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world";
return element;
}
module.exports = generateText;
index.js
var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);
配置Webpack
现在开始配置webpack，目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹，然后再把合并以后的js引用在里面，但是这样有些麻烦，所以我们这里安装一个plugin，可以自动快速的帮我们生成HTML。
npm install html-webpack-plugin --save-dev//此模块帮我们生成html
在webpack 以下内容
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
entry: __dirname + "/app/index.js",
//输出的文件名 合并以后的js会命名为bundle.js
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
//添加我们的插件会自动生成一个html文件
plugins: [
new HtmlwebpackPlugin({
template: __dirname + "/app/indexhtml.html"//html模版地址
})
]
};
配置webpack-dev-server，自动刷新浏览器
安装webpack-dev-server
npm install webpack-dev-server --save-dev
在webpack 修改为
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
entry: __dirname + "/app/index.js",
//输出的文件名 合并以后的js会命名为bundle.js
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
//添加我们的插件会自动生成一个html文件
plugins: [
new HtmlwebpackPlugin({
template: __dirname + "/app/indexhtml.html"//html模版地址
})
],
//node服务器，实时预览
devServer: {
contentBase: __dirname + "/build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//当源文件改变时会自动刷新页面
port:8080//端口
}
};
然后再package.json里面配置一下运行的命令,npm支持自定义一些命令
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
好了，万事具备了，在项目根目录下输入
npm start
在浏览器里面输入[http://localhost:8080**]
Babel
Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：
下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
使用基于JavaScript进行了拓展的语言，比如React的JSX
Babel的安装与配置
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
在webpack中配置Babel的方法如下
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
entry: __dirname + "/app/index.js",
//输出的文件名 合并以后的js会命名为bundle.js
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
//添加我们的插件会自动生成一个html文件
plugins: [
new HtmlwebpackPlugin({
template: __dirname + "/app/indexhtml.html"//html模版地址
})
],
//node服务器，实时预览
devServer: {
contentBase: __dirname + "/build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//当源文件改变时会自动刷新页面
port:8080//端口
},
//babel 的配置， ES6 与React
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
}
]
}
};
现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。
记得先安装 React 和 React-DOM
npm install --save react react-dom
已经完成
个人博客： www.liangtongzhuo.com
