Webpack 基本环境搭建
1. 第一步安装之前 先npm init 创建 package.json
cnpm init;
然后全局安装 cnpm install webpack -g 确保哪里都可以使用
cnpm install webpack --save-dev
然后在本地项目里面安装依赖
我们需要在项目中创建一个index.js文件，把它放到/src文件夹里。我个人习惯于把所有的静态资源（图片/字体/CSS等）存在一个文件夹里，自己写的代码存在/src文件夹内，而电脑生成的代码则会放在/build文件夹。我们并不需要手动创建/build文件夹，可以让Webpack自动完成将/src下的代码打包到/build的操作。在/src文件夹里我们可以先创建一个名为alert.js的文件。另外还需要在项目的根目录创建webpack.config.js配置文件。现在我们的项目结构大概是下面这个样子：
1. 在webpack.config.js里面写最基本的配置
module.exports = {
entry: './src', //运行webpack之后会检查src下面的js文件
output: {
path: 'build',
filename: 'bundle.js',
},
};
接下来我们在index.js里面引入 alert.js。 require('./alert.js');
在项目的根目录下面创建一个index.html 文件
这里的bundle.js就是webpack打包之后会生成的文件。我们只需要在项目中运行webpack命令就可以生成它了。为了更方便一些，我们可以在package.json中写上构建的脚本：
"scripts": { //如果是Windows则改为 webpack && start index.html "start": "webpack && open index.html" },之后在项目的命令行中输入npm start命令
3. 配置加载器（loader）
加载器(Loader)是webpack的使用中非常重要的一部分。你可以把加载器看作一个小插件，在我们导入特定类型的文件时，对应的加载器就会起作用。
npm i -D babel-loader babel-core babel-preset-es2015
在根目录创建一个.babelrc文件，在里面设置
{
'presets' : '[es2015]'
}
让Babel处理所有我们自己编写的.js文件。注意配置好，不能让Babel干扰一些可能会使用的第三方库。修改webpack.config.js为如下内容：
加载器(Loader)配置中的test值用来匹配对应的文件类型，include用来指定在哪个路径下该加载器生效。我们先来测试一下Babel是不是已经能在Webpack里正常运作了。创建一个新的文件src/robot.js，写入以下内容：
const greetings = (text, person) => {
return `${text}, ${person}. I read you but I'm sorry, I'm afraid I can't do that`;
};
export default greetings;
我们还是要在 index.js 里面导入模块； 因为js是汇集在这里面 在webpack 打包成 bundle.js的一部分
import greetings from './robot.js'
document.write(greetings(两个参数));
4. 载入样式
再安装两个加载器 我们的项目模板差不多就准备好了
npm install css-loader style-loader --save-dev
css-loader用来读取CSS文件，style-loader则负责处理并将样式加载到页面中。我们先创建src/app.css来测试一下
.element {
background-color: blue;
color : white;
}
之后通过import语句导入到src/index.js文件中
import styles from './app.css'.
5. css-modules
我们的代码更加清晰，我个人倾向于把CSS输出为单独的文件，而不是直接嵌入HTML里面。为了实现这个需求，我们需要安装一个叫做extract text 的 Wepack 插件。
将载入的所有CSS模块输出为一个独立的CSS文件。这样你的样式就不至于和JS代码混淆在一起，而是生成一个独立的CSS打包文件。假如你的样式文件体积较大的话，这种方式可以加快页面加载速度，因为样式文件可以和JS文件同时载入。
安装插件 npm i -D extract-text-webpack-plugin;
最后在设置一下 webpack.config.js
{
test: /\.css/,
loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
}
