• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

webpack安装

前端 开心洋葱 2601次浏览 0个评论

webpack安装webpack安装

1、webpack前提

安装前首先安装node.js,不会的朋友可以参考本站的node.js安装文档,自行搜索

2、webpack安装

运行安装命令,Windows和linux/mac 一样的命令,上一步已经安装好了npm环境

$ npm install webpack -g

3、生成webpack

webpack.config.js

// webpack.config.js
var webpack = require('webpack');

module.exports = {
    entry: {
        //源入口程序
        index: './src/index.js',
        //公共 第三方库
        vendor: ['jquery']
    },
    output: {
        path: '../static/magic/build',
        publicPath : '/static/magic/build/',
        chunkFilename : '[chunkhash:8].chunk.js',
        filename: '[name].js'
    },
    plugins: [
        //第三方包打包插件
        new webpack.optimize.CommonsChunkPlugin( /* chunkName= */ "vendor", /* filename= */ "vendor.bundle.js"),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        //多种loader,支持css/图片等
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.(png|jpg|gif)$/,
            loader: 'url-loader?name=[path][name].[ext]'
        }]
    }
};

在此目录直接执行webpack命令生成

webpack官方地址

参考文档地址: http://webpack.github.io/docs/


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明webpack安装
喜欢 (0)

您必须 登录 才能发表评论!

加载中……