webpack 入门、基础配置

webpack

• 基于node.js的一个打包工具

作用

1. 优化
2. 打包：将多个文件打包成一个文件
3. 转换：es6，ts，jsx，less，sass

目标

1. 可以通过webpack对公司现有的项目进行从0开始的搭建
2. 可能对vue，react脚手架进行天剑与修改的操作

结构

1. 入口：entry
2. 出口：output
3. 插件：plugins

所需依赖

1.初始化

cnpm init 

2.webpack的核心模块

cnpm install webpack webpack-cli -g
//webpack-cli :来执行webpack相关的命令行

//配置项
"scripts": {
   "dev":"webpack --mode development --watch", //开发环境 npm run dev    --watch 实时监听
   "build":"webpack --mode production",  //生产环境  npm run build
   "test": "echo \"Error: no test specified\" && exit 1"
  },

3.入口和出口

//默认情况入口是 index.js 出口是dist/main.js
//根目录下创建 webpack.config.js

//webpack配置文件
module.export={
    //入口
    entry:{
        "名字": __dirname + "/src/main.js"
    },
    //出口
    output:{
        //打包后文件存储的目录
        path: __dirname +"/dist" ,
        //打包后的文件名
        filename:"aaa.js"
        //多个入口时
        filename:"[name].js"
    }
}

//配置文件修改完要重启服务

4.webpack-dev-server 浏览器自动重载

1. 安装
cnpm i --save webpack-dev-server
2. 配置
	devServer:{
        contentBase:'./'   //根目录地址
        //端口号
        port:8080,
         proxy:{

         }
         inline:true  //实时刷新开启 
    }

//package.json
"start" : "webpack-dev-server --mode development" 
//cnpm start

3. 不会生成dist文件
//在出口配置
publicPath:"/dist/" 虚拟的路径可以访问到生成的文件

5.source map

//配置文件
"devtool":"source-map"

//会生成两个文件 
         main.js   
  映射文件 main.js.map  //映射源代码目录 方便调试

loaders配置

1.处理css的loader

 cnpm install style-loader css-loader node-sass postcss-loader --save
 
 
 
//webpack.config.js
module:{
    rules:[
        {
            test:/\.css$/,
            loader:'style-loader!css-loader'
        //凡是以css结尾的文件 都要经过css-loader style-loader 处理 （!为连接符）
        }
    ]
}

2.处理js的loader

cnpm install babel-loader @babel/core @babel/preser-env @babel/preset-react --save

//ES6 => ES5   解决ES6兼容问题

//webpack.config.js
module:{
   rules:[
       {
           test:/\.js$/,
   		exclude:/node_modules/,//排除文件夹
           loader:'babel-loader',
           query:{
               presets:[es2015]
           }
       }
   ]
}

3.处理css兼容的loader

cnpm i --save postcss-loader autoprefixer postcss

//webpack.config.js
module:{
    rules:[
        {
            test:/\.css$/,
            loader:'style-loader!css-loader!postcss-loader',
        }
    ]
}

//新建postcss.config.js配置文件
module.exports = {
    plugins: [
        require('autoprefixer')('last 100 versions' )
        require('autoprefixer')(
        	{ browsers: 
        		[
		        	'last 10 Chrome versions',
		         	'last 5 Firefox versions', 
		         	'Safari >= 6', 
		         	'ie> 8',
		         	'iOS >= 8',
		         	'Android >= 4.4'
         		] 
         	}
        )
    ]
}

4.处理图片的loader

 cnpm install url-loader file-loader -D
 /* file-loader , url-loader (文件 copy  到目标文件夹)
(url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于
file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。) */

5.vue-loader

//解析vue
cnpm i --save vue-loader vue-template-compiler

//配置文件
 { test: /\.vue$/, use: 'vue-loader' }   -->插件

插件

 const  {VueLoaderPlugin} = require("vue-loader")

	plugins: [
        new VueLoaderPlugin()
    ]

参考配置文件

module.exports ={
  entry: {
  index:__dirname + "/src/index.js"
  },
  output: {
  path: __dirname + "/dist", //打包后的文件存放的地方
  filename: "[name].bundle.js",//打包后输出文件的文件名
  publicPath:"/dist/" //webpack output is served from
  },

  devServer: {
  contentBase: "./", //content not from webpack is serverd
  port: '8080',
  inline: true//实时刷新
  },

  devtool: 'source‐map',

  module:{
  rules:[
  {
  test: /\.css$/,
  loader: 'style‐loader!css‐loader'//添加对样式表的处理,内联样式
  //loader: 'style‐loader!css‐loader!postcss‐loader'
  },
  {
  test:/\.js$/, //随便起的test 名字
  exclude: /node_modules/, //排除一个
  // exclude: /(node_modules|src)/, //*****排除多个怎么写？？？
  loader:'babel‐loader',
  query:{
  presets:['es2015']
  }
  },

  //npm install ‐‐save‐dev sass‐loader
  //因为sass‐loader依赖于node‐sass，所以还要安装node‐sass
 // npm install ‐‐save‐dev node‐sass