首页 > 代码库 > webpack的学习感悟

webpack的学习感悟

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下的所有文件
        })
    ]
};

 

webpack的学习感悟