webpack的学习感悟

Posted 2020-09-18 铅笔画不出的黑白

https://github.com/webpack/webpack    webpack gethub地址。

http://webpack.github.io/   webpack 官网

前言

webpack作为现在比较火的前端框架，可以打包js、css、html、less、jade等文件，并且应用比较广泛。甚至一些比较火的前端框架都在使用webpack打包工具，例如vue，react等等。本着互联网的分享精神，我就将我自己的理解和想法分享给大家。

安装

安装之前如果会用cnpm的尽量用cnpm这样会快一点，本案例默认电脑上没有安装cnpm镜像。

1、设置全局webpack

npm install -g webpack

2、进入目标文件夹，本人使用文件目录（E:\webpack-test）

cd  E:\webpack-test

3、在项目中引导创建一个package.json文件 

npm init  （初始化过程就默认按回车就行了）

4、安装webpack

npm install webpack --save-dev   （ --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它） 安装完成后会在项目目录下出现node_module文件夹就证明安装成功了

 跟我一起使用

案例1

1、在项目目录下新建一个test1.js文件 ，随便写一个函数。然后进行打包

function test(){
    console.log(‘1‘)
}

2、开始打包

在命令行内输入webpack test1（文件入口）   test-pack.js（打包完成名字）

3、打包完成

　　打包完成后命令行会返回几个参数，1、Hash - 哈希值2、Version - webpack的版本、 Time：打包耗费时长。

　　另外还好返回一个列表Asset - 这次生成的文件、Size - 打包后的大小、Chunks - 这次打包的分块、Chunk Name  - 这次打包的块名称。

4、打开test-pack.js文件

我们发现，文件好像比没有打包之前大了，因为webpack打包之前会生成一些需要的内置函数，在页面的最下方可以看见我们打包的代码。

webpack打包css文件 

注意wenpack中在js文件内是可以引用css文件的。

1、新建一个css文件名称叫做style.css

　　在里面随便写一些css代码。

2、在test.js文件中引用css

　　test.js全部代码

require(‘./style.css‘)
function test() {
    console.log(‘1‘)
}

3、打包css 但是打包之前需要安装css-loader、 和style-loader否则会报错。

　　npm install css-loader style-loader  --save-dev    style-loader 是让css生效，生效后的效果就是在html页面的head标签里自动新建style标签并插入代码（这个以后的案例会讲）、css-loader是让打包软件识别css并处理css文件。

4、运行打包命令

　　webpack test1.js test-pack.js  - 但是还会报错提示- You may need an appropriate loader to handle this file type 明明已经安装了loader怎么还报错呢。

　　解决错误，根目录也就是webpack-test 下新建wenpack.config.js文件写入如下代码。即可解决。错误原因是没有指定loader。

var Webpack = require("webpack");
module.exports = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    }
}

　　或者引入css时候增加css-loader!,前缀即可

require(‘css-loader!./style.css‘);

5、打包完成

打包完成后我们看test-pack文件中又多出了好多webpack引入的一些代码，在代码的中间部分可以看见我们刚才写的css，这说明我们的css已经引入成功了。

 如何实现多文件打包

　　在一些单页面应用中一般都会打包成一个文科，那例如像官网（举例）那种也可以打包成为多页应用。但是要如何配置呢。很简单只需要配置webpack.config.js文件即可。

　　代码如下，配置完成后 在命令行内输入 webpack 就可以了，因为已经配置了webpack.config.js。就不用像上面案例那样输入很长一段语句了。

var path = require(‘path‘) //这里是引入了node.js的path模块，
module.exports = {
    entry: {
        main1:‘./src/script/main.js‘,    //如果这的value指定的是一个数组，那么就相当于将两个文件打包成一个文件。
        main2:‘./src/script/main2.js‘,
    }, //多文件入口文件配置  如果是单文件只需要写一个.string路径即可。
    output: {
        path: path.resolve(__dirname, ‘./dist/js‘), //打包后的文件的绝对路径地址
        filename: ‘[name].js‘ //打包后的文件名称[name]就像当月entry下的key（main1）还有hash、chunkhash等选项，但一般不怎么用所以呢，就不只拿name举例了。如果这里不写[]变量占位符而是一个普通的字符串的话打包文件会被覆盖，最后只会留下最后打包那个文件。
    },
};

 

chunkhash使用后文件生成动态名称，那么script要怎么引用呢。

　　在一些大型项目中需要上传到服务器远程仓库，这时候chunkhash就非常有效，因为chunkhash是当文件修改后他才会发生改变，对代码的控制性比较强。但是chunkhash改变后 script 的引用名称也需要进行更改，这样做是不是很麻烦呢，但是有一种方法可以解决。请看代码。

　　1、安装 npm install html-webpack-plugin --save-dev

var path = require(‘path‘);
var htmlWebpackPlugin = require(‘html-webpack-plugin‘); //引入模块。

module.exports = {
    entry: {
        main1: ‘./src/script/main.js‘,
        main2: ‘./src/script/main2.js‘,
    }, //多文件入口文件配置  如果是单文件只需要写一个.string路径即可。
    output: {
        path: path.resolve(__dirname, ‘./dist/js‘), //打包后的文件地址
        filename: ‘[name]-[chunkhash].js‘ //打包后的文件名称[name]就像当月entry下的key（main1）
    },
    plugins: [
        new htmlWebpackPlugin({
            template: ‘index.html‘  //指定模板文件，如果不指定的话会自动生成一个新建的index.html文件一起打包到path指定的打包地址。如果指定了的话，会将指定的模板打包后放入path指定的打包地址，然后自动使用script的 src引入entry下的所有文件
        })
    ]
};