webpack@3基础配置学习

注：此文中 webpack 使用的版本是 3.12.0，webpack-dev-server 2.11.5

1、全局安装webpack

npm install webpack -g --save

2、创建项目并初始化

• 新建项目文件夹（例如：webpack-demo）
• vscode 打开此文件夹，初始化项目   npm init -y

3、在项目中安装 webpack 并添加 webpack 的配置信息

npm install webpack@3.12.0 -D  // @3.12.0指定安装的webpack版本

webpack.config.js 配置文件

const path = require("path");

module.exports = {
  entry:'./src/app.js',// 入口 告诉webpack 项目的入口
  output:{
    path:path.resolve(__dirname,'dist'), // 第一个参数表示绝对路径，第二个参数表示指定的文件夹
    filename:'main.js' // 指定编译打包后的文件名字
  }
}

4、创建项目入口文件  app.js

在 webpack-demo 文件夹下，新建文件夹  src，在 src 文件夹下创建项目入口文件 app.js

app.js中内容：

console.log("Hello Webpack!!!")

5、修改package.json 文件，运行项目

package.json 文件修改：

{
  "name": "01",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.12.0"
  }
}

在 script 中指定运行的环境

"dev":"webpack"  // 默认会找项目中的webpack.config.js 文件，打包是按照这个文件来进行的

"dev":""webpack --config webpack.config.dev.js" // 指定的运行文件是webpack.config.dev.js 可通过这里配置不同的运行环境（Dev uat prod）"

6、启动编译

npm run dev

运行结果，在webpack-demo 文件夹下生成一个dist文件夹，里面生成一个main.js 的编译后的文件，内容如下：

至此，webpack 可以实现js 的基本编译打包效果，接下来将通过安装一些webpack plugin 来实现一些有意思的效果。

7、webpack plugin ( html-webpack-plugin)

通过指定的 html 模板，指定生成的 html 文件名称，将在 dist 文件中指定位置生成一个插入指定 js 的打包后的 html 文件。

接下来，我们通过在 webpack 中配置 html-webpack-plugin

npm install html-webpack-plugin@3.2.0 -D

webpack.config.js 中的配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    entry: './src/app.js', // 入口  告诉webpack 项目的入口
    output: {  // 生成新的js文件放在哪里
        path: path.resolve(__dirname,'dist'),// 需要给个绝对路径
        filename:"main.js"
    },
    plugins: [
        new HtmlWebpackPlugin({
          filename: 'aac.html', 
          template: 'src/index.html'
        })
    ]
};

模板文件内容

执行  【npm run dev】  编译后在dist 文件夹下生成一个名为： aac.html 的文件

打开aac.html 在浏览器控制台输出如下内容：

8、loader

loader 是webpack 用来预处理模块的，在一个模块被引入之前，会预先使用loader 处理模块的内容，下面介绍的是

npm i -S react@15.6.2

npm i -S react-dom@15.6.2

npm i -D babel-loader@7.1.5

npm i -D babel-core@6.26.3

npm i -D babel-preset-react@6.24.1 

webpack.config.js 中配置如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
modu