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-server2. 配置 devServer:{ contentBase:'./' //根目录地址 //端口号 port:8080, proxy:{ } inline:true //实时刷新开启 }//package.json"start" : "webpack-dev-server --mode development" //cnpm start3. 不会生成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.jsmodule:{ 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.jsmodule:{ rules:[ { test:/\.js$/, exclude:/node_modules/,//排除文件夹 loader:'babel-loader', query:{ presets:[es2015] } } ]}

3.处理css兼容的loader

cnpm i --save postcss-loader?autoprefixer?postcss//webpack.config.jsmodule:{ 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

//解析vuecnpm 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