webpack学习笔记

1,安装webpack
//全局安装
cnpm install webpack -g
//项目安装
cnpm install webpack --save-dev
//安装webpack-cli
cnpm install webpack-cli -g
//初始化项目
cnpm init
//查看版本
webpack -v

2,入口文件和出口文件
webpack的配置文件
webpack.config.js
入口文件的配置

    module.exports={
        //入口
        entry:{
            path:'./src/index.js'
        },
        //出口文件
        output:{
            //打包好的文件放哪
            path:__firname+'/dist',
            //打包文件名
            filrname:'bundle.js'
        }
    }

3,webpack打包模式的配置
配置开发模式 （打包后压缩）
“scripts”{
“dev”:“webpack --mode development”
}
配置生产模式 （打包后压缩）
“scripts”{
“bulid”:“webpack --mode production”
}

配置mode的模式（打包后不压缩）
	mode:'development‘//开发模式
	mode:'production’ //生产模式

4,打包css文件

	简：
	  module:{
        rules: [
            {
              test: /\.css$/,  //打包规则
              use: [ 'style-loader', 'css-loader' ] //需要使用模块的名称
            }
          ]
    }

全：
 module: {
    rules: [{ // 这里用rules而不是loaders
        test: /\.js$/, // 匹配所有js文件
        exclude: /node_modules/, // 排除掉node_modules这个文件夹的js文件
        loader: 'babel-loader', // 加载babel工具包
        options: { // 这里用options而不是query，虽然可以兼容，但是还是按照规则来吧
            presets: ['env'] // 使用es6工具包
        }
    }]
}
loader的三种写法
	第一种写法：直接用use
	rules:[
		{
			test:/\.css$/,
			use['css-loader','style-loader']
		}
	]
	
	第二种写法：把use换成loader。
	rules:[
		{
			test:/\.css$/,
			loader:['css-loader','style-loader']
		}
	]
	
	第三种写法：用use+loader的写法：
	rules:{
		text:/\.css$/,
		use:[
			{loader:'css-loader'},
			{loader:'style-loader}
		]
	}

5，引入第三方框架
安装jquery
cnpm install --save-dev jquery

全局引入，在webpack.config.js中
const webpack = require('webpack');

配置jquery，配置好之后就可以在任何.js文件中使用了
plugins:[
new webpack.ProvidePlugin({
    $:"jquery"
})

],