你的浏览器不支持canvas

Enjoy life!

用Webpack构建的第一个项目

Date： Aug 28, 2017 Author： JM

本文章采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。

这是我第一次用 Webpack构建项目，我彻底地感觉到Webpack的强大以及神奇，接下来就和大家分享一下我用 Webpack构建项目的过程。

以下部分内容参考：https://doc.webpack-china.org/configuration

一、先聊一聊 Webpack 是什么

个人认为，Webpack的本质就是Webpack利用模块间的依赖，对代码进行转换打包压缩。

具体来说，我们可以将webpack看作是一个模块打包工具：它可以分析项目结构，知道每个 js模块的依赖程度以及一些浏览器暂时未能全兼容的语言，并将其转化打包压缩浏览器可以支持的语言。

例如：scss 转换成 css，.es6 转换 js

二、聊一聊 Webpack 的自动化

在还没有接触到Webpack之前，我做项目的时候一般都是写一段代码后就要刷新浏览器一次查看效果，那就是说，我每写一段新代码或者修改一段代码就需要刷新一次浏览器，说句实话，这实在太浪费时间了。

Webpack自动化就帮我解决了这个问题：只要我修改或创建了一段代码，"Webpack内置的观察者"就会“察觉”到，那么它就会通过一系列我也未知的指令告诉"Webpack-server"：xxx 被修改或者创建了，记得刷新一下页面。然后"Webpack-server"就会自动刷新页面。

三、聊一聊 Webpack 需要借助的工具

我们需要下载 Node.js，利用 npm去辅助 Webpack的一些工具的下载。

四、说一说 package.json文件

package.json 文件里面都是包含整个项目的一些基本信息

{
  "name": "p6-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.16",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.5",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "server": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  • 这里要说一说 devDependencies这个字段。
    • devDependencies保存的是你用到的npm包的版本信息，只要有了它，其他人将代码 clone 下来之后运行 npm install 命令后会自动将所有依赖安装下来
  • 命令如下所示
npm install --save-dev 你需要安装的npm包

例如：npm install --save-dev webpack

补充：

  • 如果webpack安装在全局，我们执行的命令只需要是：当前项目的根目录 + webpack
  • 如果webpack安装在本地，我们执行的命令需要改成：当前项目的根目录 + node_modules/.bin/webpack

为了简化node_modules/.bin/webpack这么繁琐的命令，我们可以按如下去简化【 在package.json中对scripts对象进行相关设置即可】：

  • npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "webpack project",
  "scripts": {
    "start": "webpack" 
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.12.9"
  }
}
  • 如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用 npm run {script name}，例如npm run build
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "webpack project",
  "scripts": {
    "build": "webpack" 
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.12.9"
  }
}

五、聊一聊 webpack.config.js 文件

webpack.config.js文件就是启动’Webpack’进行构建项目的基本配置文件。以下是完整的webpack.config.js文件示例（有一些功能没有用到）：

/**
 * Created by jm on 2017/8/23.
 */
var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    CleanWebpackPlugin = require('clean-webpack-plugin'),
    CopyWebpackPlugin = require('copy-webpack-plugin'),
    ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'),
    UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
    // 入口文件
    entry: './src/js/index.js',
    // 输出的目录和文件
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, './dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // 这一条命令是将css都打包到bundle.js文件中，并且需要在入口的js文件中 require CSS文件
                // use: ['style-loader', 'css-loader']
                // 这一条命令是将css文件独立分离出来到一个css文件中
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        // 使用 html-webpack-plugin 将 src/index.html 作为模板
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        // 复制图片
        new CopyWebpackPlugin([
            {
                from: __dirname + '/src/images/',
                to: __dirname + '/dist/images'
            }
        ]),
        // 使用 extract-text-webpack-plugin 将 CSS 文件分离出来，构建后目录单独有一个 style.css 文件
        new ExtractTextWebpackPlugin('style.css'),
        //  每次构建之前删掉 dist 目录
        new CleanWebpackPlugin(['dist']),
        // 使用 webpack.optimize.UglifyJsPlugin 对代码进行压缩
        new UglifyJsPlugin()
    ]
};

5.1 安装 Webpack

  • 安装命令如下所示：
npm install --save-dev webpack

5.2 使用webpack构建本地服务器

  • 安装命令如下所示：
npm install --save-dev webpack-dev-server

5.3 入口（entry）

entry是起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。

  • 动态加载的模块不是入口起点。

  • 简单规则：每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

5.3 输出（output）

output位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的bundle、asset 和其他你所打包或使用 webpack 载入的任何内容。

// 输出的目录和文件
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, './dist')
    },
  • output.filename：决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。

5.4 css-loader 和 style-loader

  • 安装命令如下所示：
npm install --save-dev css-loader style-loader
  • 使用 css-loader 和 style-loader, 将 某一个css文件加入打包。
 module: {
    rules: [
        {
            test: /\.css$/,
            // 这一条命令是将css都打包到bundle.js文件中，并且需要在入口的js文件中 require CSS文件
            use: ['style-loader', 'css-loader']
          
        }
    ]
    }

5.5 html-webpack-plugin

页面引用打包后的 js 的路径也是我们手动加上去的。而实际项目中我们希望把 html 文件也加入构建中，并且自动将打包后的 js 加到 html 中，甚至可以使用不同的模板自动生成``html 文件，在 Webpack 里面需要 html-webpack-plugin` 插件来实现。【css也是如此】

  • 安装命令如下所示：
npm install --save-dev html-webpack-plugin

var  HtmlWebpackPlugin = require('html-webpack-plugin');

 plugins: [
    // 使用 html-webpack-plugin 将 src/index.html 作为模板
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html'
    })
    ]

5.6 extract-text-webpack-plugin

  • 安装命令如下所示：
npm install --save-dev extract-text-webpack-plugin

我们可以使用 extract-text-webpack-plugin 将 CSS 文件分离出来，构建后目录单独有一个 style.css 文件

module: {
    rules: [
        {
            test: /\.css$/,
            // 这一条命令是将css文件独立分离出来到一个css文件中，需要在入口的js文件中 require CSS文件
            use: ExtractTextWebpackPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader'
            })
        }
    ]
    },

5.7 copy-webpack-plugin

  • 安装命令如下所示：
npm install --save-dev copy-webpack-plugin

copy-webpack-plugin将文件或者目录复制到指定的地方。

 plugins: [
    // 复制图片
       new CopyWebpackPlugin([
           {
               from: __dirname + '/src/images/', // 指定哪里的文件或目录需要复制
               to: __dirname + '/dist/images' // 指定文件或者目录被复制到哪里
           }
       ])
    ]

5.8 webpack.optimize.UglifyJsPlugin

  • 使用 webpack.optimize.UglifyJsPlugin 对代码进行压缩
var webpack = require('webpack'),
    UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
    
 plugins: [
    // 使用 webpack.optimize.UglifyJsPlugin 对代码进行压缩
           new UglifyJsPlugin()
    ]

5.9 clean-webpack-plugin

  • 安装命令如下所示：
npm install --save-dev clean-webpack-plugin
  • 使用 clean-webpack-plugin， 每次构建之前删掉 dist 目录，避免上一次构建的影响
var CleanWebpackPlugin = require('clean-webpack-plugin');
    
 plugins: [
    //  每次构建之前删掉 dist 目录
           new CleanWebpackPlugin(['dist']),
    ]

对于本文内容有问题或建议的小伙伴，欢迎在文章底部留言交流讨论。