关于网页开发webpack基本配置.

/**
 * Created by Administrator on 2017/5/29.
 */
var webpack = require("webpack");
var htmlWebpackPlugin = require("html-webpack-plugin");

var ExtractTextPlugin  = require("extract-text-webpack-plugin");
//nodejs的里的一个全局变量,它指向的是我们项目的根目录,入口文件的位置
module.exports = {
    // devtool: "eval-source-map",
  //配置入口文件
    entry: {
        index: __dirname + '/app/main.js',
      //   index2:__dirname + '/app/main2.js',
      // index3:__dirname + '/app/main3.js',
    },

    output: {
        //需要打包后的文件 放置的位置
        path: __dirname + '/public',
        //打包后文件的名字
      filename: 'js/[name].js',
        // filename: 'js/[name]-[chunkhash].js',
      // publicPath: "http://www.xianianwang.com" //用来上线时候输出的前缀
    },

    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        // stats:{
        //     colors: true,//终端中输出结果为彩色---没有颜色了
        // },
        // historyApiFallback: true,//不跳转
        inline: true,//实时刷新
        port: 8080,
        // hot:true
    },
    module: {
      loaders: [
            {
                test: /\.json$/,
                use: 'json-loader'
            },
        //处理页面中以ejs为结尾的文件
          {
            test:/\.ejs$/,
            use:'ejs-loader'
          },
        //处理页面中以html为结尾的文件,使用了这个插件,ejs中的变量将不再有效果
        {
          test:/\.html$/,
          use:'html-loader'
        },
          //下面这个插件会将页面中的变量解析为正常的html文件,如何要在页面中使用htmlwebpackplugin变量则需要注释这个插件
            // {
            //   test: /\.css$/,
            //   //从右向左翻译,css-loader必须在右边,不然没办法执行style-loader
            //   use:[
            //     'style-loader', 'css-loader',
            //     {
            //     loader: "postcss-loader",
            //     options:{
            //       plugins: (loader) => [
            //         require('autoprefixer')
            //         ],
            //         minimize:true
            //     }
            //   }]
            // },
        //处理图片
            {
                test:/\.(png|jpg|git|woff)/,
                use: [
                  //将图片输出到images的目录之下如何大小在8192之下则打包成base64,如果在这这之前刚保存到./images 之下
                  {
                    loader: "url-loader?limit=8192?name=[name].[hash:6].[ext]&publicPath=./&outputPath=images/"
                  },
                  //压缩图片的大小
                  {
                    loader: "image-webpack-loader"
                  }
                ]
            },
        //将es6的代码转为es5的代码
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
        //将css独立出来
            { test: /\.css$/,
              loader: ExtractTextPlugin.extract({fallback :'style-loader',
                use:[
                {
                  loader : 'css-loader'
                },
                  //给css添加前缀
                {
                  loader: 'postcss-loader',
                  options: {
                    plugins: (loader) => [
                      require('autoprefixer')({
                        browsers:['last 5 versions']
                      }),
                    ],
                    minimize:true
                  }
                }
              ]}) }
        ],
    },
    plugins: [
        new ExtractTextPlugin({filename: 'css/[name].css'}),//样式压缩
        //创建一个新的页面在public 以app/index.html中的文件为依据
        //   生产环境下启用:压缩js代码
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        },
        mangle: false,

      }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new htmlWebpackPlugin({
          filename: 'index.html',
          template: "app/index.html",
          title:"webpack title",
          inject: 'body',
          date:new Date(),
            minify: {
                removeComments: true,    //移除HTML中的注释
                // collapseWhitespace: true,    //删除空白符与换行符
                conservativeCollapse: true,
                minifyJS: true //js也在一行
            },
            // hash: true,
            // chunks: ['index'],
            // xhtml: true,
            // showErrors: true
        }),
      // new htmlWebpackPlugin({
      //   filename: 'b.html',
      //   template: "app/index.html",
      //   title:"webpack b.html",
      //   inject: 'head',
      //   chunks:['index2']
      // }),
      // new htmlWebpackPlugin({
      //   filename: 'c.html',
      //   template: "app/index.html",
      //   title:"webpack c.html",
      //   inject: 'head',
      //   chunks:['index3']
      // }),
        // new webpack.HotModuleReplacementPlugin()
    ],
};
// var htmlWebpackPlugin=new htmlWebpackPlugin();

所有的源码在 :http://git.oschina.net/kaykie/webpackmoban

希望对你们有帮助,可以的话 给加个星啊

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ShaoYL

UIViewController的生命周期及iOS程序执行顺序

28711
来自专栏章鱼的慢慢技术路

Go语言实践_实现一(服务器端)对多(客户端)在线聊天室

运用Go语言中的goroutine和通道实现一个简单的一个服务器端对多个客户端的在线聊天

1353
来自专栏菩提树下的杨过

puremvc框架之hello world!

puremvc是一个可应用于多种语言、多种平台的mvc框架。根据官网上的描述,现在已经支持下列语言: ? 官方也推出了最佳实践的中文文档,当然,园子里也有兄弟说...

5988
来自专栏coding for love

在线商城项目09-基于express框架的server端搭建

在本地项目目录加入.gitignore文件,可以直接copy six-tao项目的该文件。

551
来自专栏Golang语言社区

"LollipopGo/library/lollipop/common" 测试2

Golang语言社区 开源轻量级web应用框架,可以快速创建博客及商城等

3746
来自专栏木头编程 - moTzxx

js setInterval 代码实现页面轮询

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1193
来自专栏开源优测

Robot Framework | 02 从抛弃RIDE开始创建你的RFS测试

概述 大多数情况下,我们用RobotFramework时,一般基于其图形界面的RIDE来编辑、管理、执行用例。 今天我们分享下基于非编辑器模式的RobotFra...

3259
来自专栏xiaoxi666的专栏

【开源项目】将图片转换为字符画

请移步Github仓库:https://github.com/xiaoxi666/Img2AsciiVision

951
来自专栏菩提树下的杨过

Flex4中的ModuleLoader,Alert以及TitleWindow

1、ModuleLoader 在Asp.Net开发中,经常会把页面的公共部分封装成自定义控件ascx,以达到重用或动态加载的目的。在Flex4中MXML Mod...

2365
来自专栏葡萄城控件技术团队

七天学会ASP.NET MVC (四)——用户授权认证问题

小编应各位的要求,快马加鞭,马不停蹄的终于:七天学会 Asp.Net MVC 第四篇出炉,在第四天的学习中,我们主要了学习如何在MVC中如何实现认证授权等问题,...

2625

扫码关注云+社区