前端开发"模块打包器"webpack4实战入门

Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

Q:webpack真的是前端必学吗？

A:从工作角度来说，一个团队只需要一两个人对 webpack 比较熟练，然后把配置封装好做成脚手架。每次新建项目都使用这个脚手架。团队其他人不应该（也没必要）经常去修改 webpack 配置。但是从面试角度来说，你不学不行，20k 以上的面试肯定会问 webpack 原理和优化。

以下放视频（共28分钟）来学习一下如何使用 webpack4

使用WEBPACK

Q:为什么要用构建工具？

A:如果你只会js+css+html，最多再加上jquery，那么当你听到构建工具这个说法是不是蒙的？这种情况下我不建议你学习webpack，建议你学下 vue 或者 react 框架，这两个框架都有自己的脚手架，所谓脚手架就是别人用构建工具帮你搭好了原始项目，你可以在不懂构建工具的情况下进行前端开发。不过这就是初级前端的基本工作，给我一个环境，让我安心的写业务代码。

2. 安装，使用，生成工程文件。

Q:为什么需要构建或者说编译呢？

A:因为像es6、less及sass、模板语法、vue指令及jsx在浏览器中是无法直接执行的，必须经过构建这一个操作才能保证项目运行，所以前端构建打包很重要。除了这些，前端构建还能解决一些web应用性能问题，比如：依赖打包、资源嵌入、文件压缩及hash指纹等。具体的我不再展开，总之前端构建工程化已经是趋势。

3. 实战出真知，学会了就去试试吧。

附：一个简单而通用的webpack配置文件

var webpack = require("webpack");
var DefinePlugin = require('webpack/lib/DefinePlugin');
module.exports =  { 
        context:process.cwd(),
        watch: true,
        entry: './index.js',
        devtool: 'source-map',
        output: {
            path: path.resolve(process.cwd(),'dist/'),
            filename: '[name].js'
        },
        resolve: {
            alias:{ jquery: process.cwd()+'/src/lib/jquery.js', }
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                _: 'underscore',
                React: 'react'
            }),
            new DefinePlugin({
              'process.env': {
                'NODE_ENV': JSON.stringify('development')
              }
            })
        ],
        module: {
            loaders: [{
                test: /.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },  {
                test: /.less$/,
                loaders:['style-loader', 'css-loader','less-loader']
            }, {
                test: /.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
            }, {
                test: /.html/,
                loader: "html-loader?" + JSON.stringify({minimize: false })
            } ]
        }
    };