webpack 第二篇（搭建一个webpack）

菜的黑人牙膏

发布于 2019-01-21 16:22:28

5020

发布于 2019-01-21 16:22:28

文章被收录于专栏：前端学习归纳总结

为了省事，我直接在github上clone了一个小型webpack项目，这是地址：https://github.com/acexyf/WebpackTest

接下来会基于该项目进行webpack的一些构建进行拆解。

在clone项目后，通过npm install安装依赖包，然后执行npm start命令，然后打开view/index.html即可看到运行的结果。

首先，我们来看一下根目录下的package.json：

首先是script对象，script对象就是简化执行命令，当我们执行npm start时也就是执行了webpack命令，实际开发中，要执行的命令通常比较长，需要在后面添加一系列的参数来暴露错误信息、压缩代码等，通过在package.json文件中配置，可以简化方便我们工作。如：(

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

) 执行npm dev即执行后面那个很长的命令。

　　接下来的是devDependecies和dependecies对象，这两个对象都是描述该项目所需要的依赖，配置后可以通过npm install一次安装，他们的区别在于，devDep是开发中需要而实际生产不需要的依赖，而depend即是生产和开发情况下都必须的依赖。有时候在开发时我们调试需要某个依赖，即安装到devDep即可，因为生产中并不需要该依赖。

第二个文件即是根目录下的webpack.config.js

let webpack = require('webpack');
let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: {
        index: './public/javascript/entry.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].bundle.js',
        publicPath: './build/'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
            { test: /\.(png|jpg|gif)$/, loader: 'file-loader?limit=8192&name=../[path][name].[ext]' },
            { test: /\.js[x]?$/, loader: 'babel' }
        ]
    },
    plugins: [
        //查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
        // new webpack.optimize.CommonsChunkPlugin('common.js'),
        // new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin('[name].css', { allChunks: true })
    ]
}

这里有四个主要点，即entry\output\module(loaders)\plugins，关于他们的概念在上一篇文章中有解释，而其配置语法可以在官方中寻找，这里只要继续关注大概的结构。

接下来根据config.js中的entry属性找到入口文件，即'./public/javascript/entry.js'

// 引入css文件 该文件会通过css-loader等Loader转换成js文件类型以通过webpack的识别
require('../stylesheet/style.css');
// 引入module.js 即 text 等于 module.js文件中的module.exports
// 即 test = 'It works from module.js.'
let text= require('./module.js');
// 下面的是正常的js代码
let array = [1, 2, 3, 4];

class Person{
    constructor(name){
        this.name = name;
    }
    sayHello(){
        console.log(`hi I am ${this.name} `);
    }
}
let person=new Person('xyf')
person.sayHello();

document.write('It works.' + array[0]);
document.write(text);

关于模块，推荐阅读朴灵老师的深入浅出的node.js中的模块一章。

当我们只想npm start时， webpack会找到该入口文件，并打包成我们定义的output对象中的属性（文件名和输出位置），即最后会生成一个build文件夹如下：