webpack配置备份

Posted 2020-08-21 韭菜茄子

package.json:

{
  "name": "webpackTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "app": "webpack-dev-server --inline --hot",
    "dev": "set NODE_ENV=dev&&webpack",
    "test": "set NODE_ENV=test&&webpack",
    "pro": "set NODE_ENV=pro&&webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.1.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.1",
    "uglify-js": "^2.7.4",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js:

/**
 * Created by Administrator on 2016/11/28 0028.
 */
/*webpack适合SPA(单页面应用)使用*/
var webpack=require(‘webpack‘);
var ExtractTextPlugin=require(‘extract-text-webpack-plugin‘);
var extractCss=new ExtractTextPlugin(‘css/[name].css‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports={
    entry :{
        app: __dirname +"/src/js/index.js",
        /*方括号里引用了node_modules里相应模块*/
        lib:[‘jquery‘,‘underscore‘]
    },/*入口文件*/
    output:{
        path:__dirname +"/assets/",/*输出路径*/
        filename:‘js/index.js‘,/*输出的文件名*/
        publicPath:‘http://192.168.1.108:7777/assets‘/*缓存区域,调试或上线时使用*/
    },
    /*webpack-dev-server服务器配置*/
    devServer:{
        contentBase:"./",/*根目录*/
        host:"192.168.1.108",/*本机地址*/
        port:‘7777‘,/*端口设置*/
        color:true/*颜色设置*/
    },
    /*模块设置*/
    module:{
        /*设置文件用什么loader去读取*/
        loaders:[
/*            {
                test:/\.css$/,*//*正则匹配*//*
                loader:‘style-loader!css-loader‘*//*!是连接符,文件解释器*//*
            },*/
            {
             test:/\.css$/,
             loader:extractCss.extract(‘style-loader‘,‘css-loader‘)
            },
            {
                test:/\.less$/,
                loader:‘style!css!less‘
            },
            {
                test:/\.json$/,
                loader:‘json‘
            },
            {
                test:/\.(gif|jpg|png)$/,
                /*图片资源在加载时先压缩，当图片小于7KB时转成base64格式内嵌进去以减少http请求数，当图片大于7kb时，则会在/assets/images/下生成压缩后的图片*/
                loader:‘url-loader?limit=7000&name=/images/[hash:6].[name].[ext]‘
            }
        ]
    },
    /*插件*/
    plugins:[
        new webpack.HotModuleReplacementPlugin(),/*热插拔*/
        extractCss,
        new HtmlWebpackPlugin({
            title:‘leyi‘,
            filename:‘../home.html‘,
            template:__dirname+‘/src/tpl/indexTpl.html‘,
            inject:‘body‘/*把模板生成到body标签最下面*/
        }),
        /*js压缩*/
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        /*把一个全局变量插入到所有的代码中*/
        new webpack.ProvidePlugin({
            $:‘jquery‘
        }),
        /*抽取某些JS文件单独另打包成一个JS文件，一般抽取公共JS打包成一个共享的JS文件*/
        new webpack.optimize.CommonsChunkPlugin("lib","js/lib.js")
    ],
    resolve:{
        //查找modules从这里开始查找，可以是本地某个地方，也可以是远程网络地址获取模块
        root:‘f:/webpackTest/‘,
        //自动扩展文件后缀名，require模块的时候可以不用写后缀了
        extensions:[‘‘,‘.js‘,‘.json‘,‘.less‘],
        //模块别名定义，require的时候写别名就可以了，定义好后就不用写长长的地址了
        alias:{
          happy:"externalModules/happy.js",
          funy:"src/js/funy.js"
        }

    },
    /*自动监控*/
    watch:true
};

/*先在package.json里配置开发、测试、生产环境运行命令(注意空格问题)，根据运行的命令设置相应操作*/
if(process.env.NODE_ENV===‘dev‘){
    console.info(‘执行的是开发环境‘);
}else if(process.env.NODE_ENV===‘test‘){
    console.info(‘执行的是测试环境‘);
}else{
    console.info(‘执行的是生产环境‘);
}

Demo:　

http://files.cnblogs.com/files/leyi/webpackTestDemo.rar