基于已有项目整合webpack配合babel支持es6转码压缩

版权声明:第一次写文章,有什么需要补充的还望各位大神多多指教。 https://blog.csdn.net/mengxiangxingdong/article/details/76588124

需求:

    在已有的项目基础上整合webpack,babel支持es6转码压缩

想要单独使用请参考

    1.单独使用webpack压缩代码
        [https://segmentfault.com/a/1190000005742037](https://segmentfault.com/a/1190000005742037)
    2.单独使用babel进行es6转码es5
        [http://www.cnblogs.com/yuanbo88/p/6389299.html](http://www.cnblogs.com/yuanbo88/p/6389299.html)

已有环境

    假设我们已经有了一个支持es6的web项目,并且安装了nodejs,并且npm配置高速镜像

没有安装的请参考一下资料

1.web项目
重新搭建http://blog.csdn.net/mengxiangxingdong/article/details/76577953
或者直接下载
链接:http://pan.baidu.com/s/1kU6mYjH 密码:z181
2.支持es6
http://blog.csdn.net/mengxiangxingdong/article/details/76577953
3.没有安装nodejs
http://www.runoob.com/nodejs/nodejs-install-setup.html
4.npm的使用学习
http://www.runoob.com/nodejs/nodejs-npm.html

配置镜像(二选一)

1.配置npm淘宝镜像

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm –registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
$ cnpm install [name]
更多信息可以查阅:http://npm.taobao.org/

2.配置国内良心镜像仍然是用npm命令

                npm config set registry https://registry.npm.taobao.org

安装webpack

    1.首先全局安装webpack
        npm install webpack -g
    2.选择安装的版本
        npm install webpack@1.31.x --save-dev
        此命令也可以解决cmd不支持webpack命令
    3.如果要使用webpack开发工具,要单独安装 webpack-dev-server
        npm install webpack-dev-server --save-dev
    4.跳转到当前项目下带有packjson的目录
        没有packjson的默认创建再项目根目录下创建
            packjson详解
        我的是在项目的根目录下的web下
    执行
        npm install --save-dev webpack webpack-dev-server

安装webpack所需要的插件

    1.安装loaders 
        npm install style-loader css-loader 
        wepback的一大特色就是可以将一些浏览器不能原生支持的文件通过loaders编译成浏览器可以支持的文件
    2.自动补全css3前缀
        npm install --save-dev autoprefixer postcss-loader
    3.自动生成html插件
        npm install html-webpack-plugin --save-dev
    4.提取样式插件(必须)
        把额外的数据加到编译好的文件中
        npm install extract-text-webpack-plugin --save-dev
    5.拷贝资源插件(必须)
        在webpack中拷贝文件和文件夹
        npm install copy-webpack-plugin --save-dev
    6.全局挂载插件
        webpack.ProvidePlugin [webpack内置插件 ]

安装babel

    npm install --save-dev babel-core babel-preset-es2015  
        可以选择其他规则
        一共有四种规则
    npm install --save-dev babel-loader 

安装对应的第三方库

    如果未使用百度云盘下载的项目可以不用安装
    1.jquery
        npm install jquery
    2.d3.js
        npm install d3

启动

    首次编译
        webpack
    webpack --progress --colors --watch
启动tomcat就可以看到网页并且调试了

webpack常用命令

    $ webpack --config webpack.min.js //另一份配置文件
    $ webpack --display-error-details //显示异常信息
    $ webpack --watch   //监听变动并自动打包
    $ webpack -p    //压缩混淆脚本,这个非常非常重要!
    $ webpack -d    //生成map映射文件,告知哪些模块被最终打包到哪里了
    当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色
        webpack --progress --colors
    监听模式
        webpack --progress --colors --watch
        作用:
            如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的

参考资料链接

    1.单独使用webpack压缩代码
        https://segmentfault.com/a/1190000005742037
        http://www.runoob.com/w3cnote/webpack-tutorial.html
            比较推荐
    2.单独使用babel进行es6转码es5
        http://www.cnblogs.com/yuanbo88/p/6389299.html
    3.零基础入门webpack
        https://segmentfault.com/a/1190000005742037
    4.关于webpack插件篇
        https://segmentfault.com/a/1190000005742122
    5.常用命令
        http://www.cnblogs.com/sloong/p/5584684.html
阅读更多
换一批

没有更多推荐了,返回首页