关于webpack配置

原创 2018年04月16日 12:25:14
package.json文件中
{"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --hot --mode development --port 3000"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.6",
    "less": "^3.0.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.7.2",
    "sass": "^1.0.0-rc.1",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1"
   }

}


webpack.config.js文件
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
  entry:path.join(__dirname,'./index.js'),
  output:{
      path:path.join(__dirname,'./js'),
      filename:'test.js'
  },
  plugins:[
      new htmlWebpackPlugin({
          template: path.join(__dirname,'./index.html'),
          filename:'index.html'
      })
  ],
  module:{
      rules:[
          {test:/\.css$/,use:['style-loader','css-loader']},
          {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
          {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
          {test:/\.(png|jpg|bmp|gif|jpeg)$/,use:'url-loader?limit=1000&name=[hash:8]===[name].[ext]'},
          {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
          {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
      ]

  }

 resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@': path.join(__dirname, './src') 
    }
  }

  }


.babelrc文件

{
  "plugins":["transform-runtime"],
  "presets":["env","stage-0"]
}

前端面试之webpack篇

https://juejin.im/post/59cb6307f265da064e1f65b9 还是以前一样,有些概念面试可能会考,我都用*标记了出来,两句话就总结清楚其余的地方如果你想了解webp...
  • sinat_17775997
  • sinat_17775997
  • 2017-09-28 14:08:18
  • 3844

webpack配置 包含分离css文件

1. webpack配置 --- 包含分离css文件 var path = require('path'); //将css文件分开打包的插件 var ExtractTextPlugin = requ...
  • aide315
  • aide315
  • 2018-03-18 15:29:31
  • 107

webpack4.x 关于style-loader和css-loader的配置以及JS的生产环境压缩 第五节

loaders:在webpack里面是一个很重要的功能 表示加载器、转换器 通常情况下,webpack只对js文件提供支持,但是比如说less/sass/css/ES7等就不认识了,这时候就需要...
  • xyphf
  • xyphf
  • 2018-04-05 21:35:42
  • 272

webpack中编译es6和es7

今天来学习webpack如何编译es6和es7.做一下笔记,初学,如果有不对的地方,希望大神指正。babel-loader   这个的速度不是很快,因为要对文件进行分析后再转换babel-preset...
  • weixin_40814356
  • weixin_40814356
  • 2018-04-05 08:06:08
  • 99

webpack4.X版本的使用

现在,webpack已经更新到了4.X的版本了,在这之前呢,有过一点的接触,简单的学了一下,但是到了这个版本之后呢,发现了很多新的东西,有些指令,包的功能发生一些变化,在使用的过程中也发现了很多的问题...
  • luo_tianhong
  • luo_tianhong
  • 2018-03-27 13:27:19
  • 209

webpack.config.js全部有关配置

'use strict'; const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin...
  • qq_37608036
  • qq_37608036
  • 2017-07-09 19:44:07
  • 1682

Webpack入门教程

webpack-热门的模块加载器兼打包工具 webpack介绍,webpack作用,browerify和webpack的区别,webpack的安装,webpack编译第一个例子,loader加载其他类型文件 webpack.config.js等 webpack-dev-server,端口号更改,热重载、实时刷新,package.json的配置,resolve,React的配置
  • 2017年01月22日 10:23

webpack详细配置解析

阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本...
  • itKingOne
  • itKingOne
  • 2017-04-12 17:58:02
  • 2819

webpack配置代理

1.
  • wsj__WSJ
  • wsj__WSJ
  • 2018-03-18 17:16:33
  • 98

webpack之proxyTable设置跨域

使用vue-cli搭建的vue项目可以使用在项目内设置代理(proxyTable)的方式来解决跨域问题。proxyTable: { '/api': { target: 'h...
  • u013575984
  • u013575984
  • 2017-10-23 15:45:55
  • 839
收藏助手
不良信息举报
您举报文章:关于webpack配置
举报原因:
原因补充:

(最多只允许输入30个字)