webpack常用配置

一．Webpack安装：

一、本地安装

1.初始化项目：

npm init -y

 2.安装webpack及依赖：

npm install webpack webpack-cli -D

 3.配置webpack.json里面的scripts:

"scripts": {
    "build": "webpack index.js -o ./dist/bundle.js"
  },
//build自定义别名；index.js是入口文件；bundle.js打包完成的文件

4.打包命令：

npm run build

5.为了防止配置文件混乱，我们将配置文件拎出来单独新建一个webpack.config.js文件

const path = require("path")
module.exports = {
  // 入口文件
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    // 出口的目录
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 打包的模式
  // development： 开发，代码不压缩
  // production: 生产，代码压缩
  mode: 'production',
  
}

6.打包命令：

npm run webpack

以上js打包完成

二、css打包：

1.现在入口文件index.js中引入.css文件

const $ = require('./css/index.css');

2.安装css-loader

npm install style-loader css-loader -D

3.配置loader

 // 配置loader
  module: {
    // 配置css-loader,解析css文件
    rules: [
      {
        // 正则，匹配所有的css文件
        // css-loader的作用： 根据关键字： require/import 找到对应的css文件进行解析
        // style-loader的作用：把解析的css代码通过style标签插入到DOM中
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }, 
    ]
  }
}

4.安装less：

npm install -D less-loader less

const path = require("path")
module.exports = {
  // 入口文件
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    // 出口的目录
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 打包的模式
  // development： 开发，代码不压缩
  // production: 生产，代码压缩
  mode: 'production',
  //配置loader
  module:{
  	//配置css-loader
  	rules:[
  	{
  		test:/\.css$/,
  		use:['style-loader','css-loader']
  	},
  	{
  		test:/\.less$/,
  		use:['style-loader','css-loader','less-loader']
  	}
  	]
  }
  
}

5.图片处理：

npm install file-loader -D

//css样式
li{
    line-height: 50px;
    width: 300px;
    height: 200px;
    background: url(../images/244.png);
}
//对css里图片进行处理配置

const path = require("path")
module.exports = {
  // 入口文件
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    // 出口的目录
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 打包的模式
  // development： 开发，代码不压缩
  // production: 生产，代码压缩
  mode: 'production',
  //配置loader
  module:{
  	//配置css-loader
  	rules:[
  	{
  		test:/\.css$/,
  		use:['style-loader','css-loader']
  	},
  	{
  		test:/\.less$/,
  		use:['style-loader','css-loader','less-loader']
  	},
    //图片打包处理
  	/*{
  		test:/\.(gif|jpg|png|jpeg)$/,
  		use:['file-loader']
  	}*/
    {
  		test:/\.(gif|jpg|png|jpeg)$/,
  		use:[{
  			loader:'url-loader',
  			options:{
  				limit:8912
  			}
  		}]
      },
      {
        //字体图标配置
		test: /\.(eot|svg|ttf|woff|woff2)$/,
		use: [{
			loader: 'url-loader',
			options: {
				limit: 1024 * 10
		        }
			}]
		}
    }

注：file-loader和url-loader都可以打包图片，url-loader类似于 file-loader，但如果文件小于字节限制，则可以返回DataURL。这里如果图片小于8K，解析成base64编码，如果图片大于8k，就交给file-loader，生成一张独立的图片（url-loader限制图片大小的原因是如果图片太大，会导致生成的js太大，浪费资源），所以当用url-loader时，要同时安装file-loader，不然就会报错

6.es6高级语法转换低版本语法：

npm install babel-loader babel-core babel-preset-env -D

7.webpack插件：

npm install -D html-webpack-plugin

使用

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    plugins: [
    new HtmlWebpackPlugin({
    	template:path.join(__dirname, "src", "index.html")
    })
  ]
}

webpack-dev-server的使用；（注：在以后开发就可以随着代码的改动，可以实时更新页面效果）

npm install -D webpack-dev-server

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    open: true,//默认打开浏览器
    port: 8080 //默认端口
  }

热更新：（注：好处是只打包你修改的文件）

const webpack = require('webpack')
 plugins: [
    new HtmlWebpackPlugin({
    	template:path.join(__dirname, "src", "index.html")
    }),
    new webpack.HotModuleReplacementPlugin({})//热更新
  ],
devServer: {
    contentBase: path.join(__dirname, 'dist'),
    open: true,
    hot:true, //热更新,这个属性依赖一个HotModuleReplacementPlugin的插件，需要安装即可
    port: 8080
 }