webpack构建工具快速上手指南

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack构建工具快速上手指南相关的知识,希望对你有一定的参考价值。

最近在研究react项目,接触到webpack打包工具。刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅。

webpack是什么

webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、样式(含less/sass)、图片等都作为模块来使用和处理。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。 当然做react项目也可以不用webpack构建工具,可以用gulp或者grunt等构建工具,但是GitHub 上面rect相关项目都是用webpack来构建的,官方推荐也是webpack更为合适,所以我们没有理由不掌握它。

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的入口文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的javascript文件。

webpack 的优势

  1. 在webpack看来一切都是模块,包括javascript、css以及图片等。

  2. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。。

  3. 扩展性强,插件机制完善。

webpack文件配置

webpack有四个核心概念:入口(entry)、输出(output)、加载器(loader)、插件(plugins)。下面来看一下webpack.config.js文件

const webpack = require(‘webpack‘);
const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘); //css单独打包插件

module.exports = {
    //页面入口文件
    entry: {
        app: ‘./src/app‘
    },
    //打包文件输出配置
    output: {
        path: ‘dist/js‘,//打包输出路径
        filename: ‘[name].min.js‘,//文件名字
    },
    //自动扩展文件后缀名,意味着我们在项目中import模块可以省略不写后缀名
    resolve: {
        extensions: [‘.js‘, ‘.jsx‘]
    },
    //模块加载器(图片/js/css/等等)
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /^node_modules$/,
            use: [{
                loader: ‘babel-loader‘,
                options: {
                    presets: [‘es2015‘, ‘react‘],
                    plugins: ["transform-object-rest-spread"]
                }
            }]
        },{
          test: /\.less$/,
          exclude: /^node_modules$/,
          loader: ExtractTextPlugin.extract({
              fallback: ‘style-loader‘,
              use: ‘css-loader!less-loader‘
          })
        }, {
                      
            test: /\.(png|jpg|gif)$/,
            exclude: /^node_modules$/,
            include: path.resolve(__dirname, ‘./img‘),
            loader: ‘url-loader‘,
            options: {
                limit: 8192 //图片文件小于8kb的直接转为base64
            }
        }]
    },
    //插件项(这里用里一个css单独打包,否则css文件会和js文件打包在一起)
    plugins: [
        new ExtractTextPlugin("styles.min.css")
    ]
}

生产环境webpack.prod.js配置

webpack 自带了 UglifyJsPlugin,它运行 UglifyJS来压缩输出文件。

// webpack.prod.js
const webpack = require(‘webpack‘);
const htmlWebpackPlugin = require(‘html-webpack-plugin‘)

module.exports = {
      /*...*/
      new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false // 删除注释
            },
            compress: {
                warnings: false // 不显示警告,默认为false
            }
        }),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: ‘build/‘, //生成的html存放路径
            template: ‘./src/template/index.html‘, //html模板路径
            hash: true, //为静态资源css文件和js生成hash值
            title: ‘口袋‘,
            favicon: ‘./img/favicon.ico‘,
            inject: true, //所有js资源放到body底部
            minify: {
                removeComments: true, //去掉注释
                collapseWhitespace: true, //去掉空格
                minifyCSS: true, //压缩html里的css
                minifyJS: true //压缩html里的js
            }
        }),
};

html-webpack-plugin插件详解请看(https://www.npmjs.com/package/html-webpack-plugin)

安装方法

$ npm install webpack -g

运行webpack

webpack --display-error-details 后面参数“--display-error-details”是推荐加上的,方便出错时能更好定位到问题。 其他主要参数有:

$ webpack --watch //监听变动并自动打包

$ webpack -p //压缩混淆脚本

$ webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了

 

下面我们添加一个用于启动 webpack 的 npm script 脚本:
package.json

{
    "name": "demo",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "webpack-dev-server --config webpack.config.js --inline --hot",
      "build": "webpack --config webpack.prod.config.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
    }
  }

 

开发环境运行方法

使用 webpack-dev-server 开发服务是一个更好的选择。webpack-dev-server是一个小型的Node.js Express服务器,它将启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ (端口号可配置) 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

有一点需要注意的是:webpack-dev-server启动项目生成的包并没有放在你的真实目录中,而是放在了内存中,你从chrome浏览器中Source面板中可以看见.

 现在,我们可以在命令行中运行 npm start,就会看到浏览器自动加载页面。如果现在修改和保存任意源文件,web 服务器就会自动重新加载编译后的代码。赶紧试一下!

生产环境运行方法

使用 npm run build启动项目

不熟悉npm scripts的,请找阮老师文章 [http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

基于 webpack 指引就写到这里,要是看了之后能够让一脸的茫然的你豁然开朗,可以请我喝咖啡,你也可以参考下述的文章来入门:

[http://zhaoda.net/webpack-handbook/install.html]
[http://webpack.github.io/docs/]




以上是关于webpack构建工具快速上手指南的主要内容,如果未能解决你的问题,请参考以下文章

TS快速上手使用webpack配置TS项目

TS快速上手使用webpack配置TS项目

前端自动化构建工具Webpack开发模式入门指南

前端自动化构建工具Webpack1.x开发模式使用指南

TS快速上手使用webpack配置TS项目

webpack 快速入门 系列