使用webpack打包压缩项目文件中的js

最近在学webpack打包js,分享一下自己的demo和webpack基本的用法。

首先我们需要准备好2个环境。

1.我们要安装nodejs,因为webpack基于nodejs,nodejs可以点击这里下载

2.需要安装git,而且你要会使用git。


然后在dome文件夹下新建一个文件webpack.config.js,这个就是webpack的配置文件。

QQ截图20170124104249.png

这是我项目的文件目录


1.首先我们要安装webpack,常规使用git命令安装

$ npm install webpack -g

安装完成之后应该在dome根目录下面生成一个node_modules文件夹,但是我的安装到nodejs文件夹里面去了。。。。。

QQ截图20170124110325.png

2.在webpack里面配置好要打包的文件,文件输出的目录等参数。

// webpack.config.js  
module.exports = {  
    //配置入口文件,入口文件可以以对象的形式配置,也可以以数组的形式配置,后缀名可以省略
    /*
     * 对象形式配置入口
     * */
    //entry:{
    //    index:'./index'       //'./index.js'
    //},
    /*
     * 数组形式配置入口
     * */
    entry: [
        './index.js'      
    ],
    //输出文件出口
    output: {  
        /*
         输出路径,在这我们要手动创建一个文件夹,名字可以自己命名,
         输出的文件路径是相对于本文件的路径
         * */
        path: "./build",  
        filename:"bundle.js"  
    },
    /*  
     * 标题:加载器(loaders)
     * 作用:需要下载不同别的加载器,如css,js,png等等
     * */
    loaders: [
        {test: /\.js?$/, loaders: ['babel-loader']}
        /* babel加载器可以把jsx的语法转换为js的语法,也可以把es6的语法标准转换es5的语法标准
         * 你可以在这配置别的加载器,写法是一样的
         * */
 
    ],
    /*
     *
     * */
    resolve: {
        /*别名配置,配置之后,可以在别的js文件中直接使用require('d3'),
         *将导入的文件作为一个模块导入到你需要的项目中,不用配置别也可会当作模块导入项目中,只是你要重复写路径而已。
         * */
        alias: {
            'd3': 'd3/d3.min.js'
        }
    }  
}

3.我们执行git命令直接运行就行了,webpack就会开始打包压缩我们的index.js。

可以直接输入webpack指令 


  $ webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包


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


  $ webpack -p//压缩混淆脚本,这个非常非常重要!


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

我用的webpack -p指令这个指令回去压缩指定的js文件或者其他文件,然后终点是能混淆脚本把代码压缩,一般700K的源文件能压缩到180K。

在这个dome里面我的index.js原本是这样的

QQ截图20170124105444.png

压缩完成之后git窗口应该是类似这样

QQ截图20170124104401.png

然后build文件夹下面就会生成一个bundle.js

QQ截图20170124105511.png

这个就是webpack打包后的index.js了,然后我的页面只需要引用bundle.js就行了,这样打包后,js变小了执行起来快,页面的性能也能优化,而且别人不那么容易看到你的源代码。


要注意的是,webpack在配置入口文件时,文件路径要自己按照项目文件夹的路径改,不然就会报错。

QQ截图20170124110634.png

当我们配置环境的时候报错了不要慌,自己看他的提示就行。


参考的是这位大神的讲解 不过他的package.json我没用上,链接http://blog.csdn.net/itpinpai/article/details/50396697

评论(0)

请先登录后再评论,如果没有账号请先注册

发表评论