webpack.config.js

var path = require(‘path‘);
var webpack = require(‘webpack‘);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);

//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname,‘src‘);
// var APP_PATH = path.resolve(ROOT_PATH, ‘app‘);
// var BUILD_PATH = path.resolve(ROOT_PATH, ‘build‘);

module.exports = {
  entry: ROOT_PATH,
  output:{
    path: path.resolve(__dirname, ‘assets‘),
    filename: ‘bundle.js‘,
    publicPath: ‘/assets/‘
  },
  resolve: {
    extensions: [‘.js‘, ‘.jsx‘ ],
  },
  devServer: {
    historyApiFallback: true,
    host: ‘localhost‘,
    port: ‘9001‘,
    // hot: true,
    // inline: true,
    proxy: {
      ‘/nmedia‘: {
        target: ‘http://localhost:8080‘,
        changeOrigin: true,
      }
    }
  },
  devtool: ‘source-map‘,
  plugins: [
    new webpack.DefinePlugin({//指定生产环境,以便在压缩时可以让uglifyjs自动删除代码块的警告语句
     ‘process.env.NODE_ENV‘:JSON.stringify(‘production‘)
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin(‘css/styles.css‘),
    // new webpack.optimize.UglifyJsPlugin({
    //   comments: false, //去掉注释
    //   compress: {
    //     warnings: false //忽略警告,不然会有一大推的黄色字体出现
    //   }
    // })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [{
          loader: "babel-loader",
          options: { presets: ["es2015", "stage-0"] }
        }],
        include: [path.resolve(__dirname, ‘src‘)]
      },
      {
        test: /\.html$/,
        use: ‘raw-loader‘
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      { test: /\.less$/, use: ExtractTextPlugin.extract({
          fallback: ‘style-loader‘,
          use: [
            // activate source maps via loader query
            {
              loader: ‘css-loader‘,
              options: { sourceMap: true, importLoaders: 1 }
            },
            {
              loader: ‘less-loader‘,
              options: { sourceMap: true }
            }
          ]
        }
      )},
    ],
  }

}
时间: 2025-01-15 05:41:23

webpack.config.js的相关文章

[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解

接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install [email protected] --save-dev ),然后创建基本的项目文件夹结构,好了,我们的又一个基本项目结构就搭建好了. 第一.开始通过webpack.config.js文件配置我们的webpack项目 首先在项目文件夹demo2下面,新建一个webpack.config.js文件,这

webpack前端构建工具学习总结(三)之webpack.config.js配置文件

Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件. webpack文档:https://webpack.github.io/docs/ 1.新建一个文件夹src存放打包前的源文件,dist文件夹存放打包后的文件,新建一个webpack.config.js为webpac

webpack.config.js配置文件

1.基本配置 webpack在执行时,除在命令行传入参数,还可以通过指定的配置文件来执行.默认会搜索当前目录下webpack.config.js.这个文件是一个node.js模块,返回一个json格式的配置对象,或者通过--config选项来指定配置文件. //创建webpack.config.js var webpack = require('webpack'); module.exports = { entry:'./entry.js', //入口文件 output:{ //node.js中

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entry webpack.dev.config.js文件代码: 1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2 2 module.exports = { 3 entry : ['./src/js/main.js', './src/js/

webpack教程(二)——webpack.config.js文件

首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugin --save-dev 在项目app目录下建立component.js文件,写入如下代码 export default (text='hello world')=>{ const element=document.createElement('div'); element.innerHTML=te

webpack4.0.1安装问题和webpack.config.js的配置变化

The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli -D webpack4.0.1安装问题,提示: The CLI mov

[转]webpack4.0.1安装问题和webpack.config.js的配置变化

本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When usi

webpack.config.js====插件purifycss-webpack,提炼css文件

1. 安装:打包编译时,可以删除一些html中没有使用的选择器,如果html页面中没有class=a class="b"的元素,.a{}.b{}样式不会加载 cnpm install --save-dev purifycss-webpack purify-css glob 2. webpack.config.js中使用 const purifycssWebpack = require('purifycss-webpack');const glob = require('glob');

webpack.config.js====CSS相关:::css加载器

1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev //loader加载器加载css和less模块 cnpm install style-loader css-loader less less-loader --save-dev //样式抽离文件 如果是webpack4.X 需要加@next //现在webpack4.x支持mini-css-ext

webpack.config.js====CSS相关:::postcss-loader加载器,自动添加前缀

1. 安装:复制拷贝文件 cnpm install postcss-loader autoprefixer --save-dev 2. webpack.config.js中使用 rules: [ //配置css加载器 { test: /\.css$/, use: cssExtract.extract({ fallback: "style-loader", use: ["css-loader", "postcss-loader"] }) }, //