1.全局安装webpack npm install -g webpack , 查看webpack版本号 webpack -v
2.npm init -y 初始化项目，生成pageage.json 文件
3.npm install --save-dev webpack
4.创建文件目录
1）在根目录下创建一个 src 文件 ，用于存放编写的源码，创建一个dist文件夹用于存放打包之后的代码，用于发布，在dist目录下创建一个 index.html
2)在src/entery.js ，创建一个js的入口文件
3）执行webpack src/entery.js dist/bundle.js
5.使用webpack.config.js 配置文件进行配置
1.entry: {}配置入口文件
2.output: {} 出口文件，
3.module：{rules:[]} 配置loader
4.plugins：[]配置插件
6.devServer: {}配置服务， 热跟新服务， 3.5版本以上的webpack 自动配置热更新，webpack-dev-server,下载，在package.json中配置
6.loader介绍
style-loader : css 中的 url 路径处理
css-loader: 识别标签中的 id class 属性
file-loader: 解决打包后文件路径不一致的问题，
url-loader: 当图片小于一个值，打包成base64的
7.压缩js代码
1. uglify.js-webpack-plugin 插件 使用 new uglify() 这个插件不需要安装
2. html-webpack-plugin 插件html文件的打包，需要npm install 安装这个插件
3.extract-text-webpack-plugin css分离的插件,需要下载
8.html文件打包
1、
9.css分离和publicPath的使用， 在output属性中配置publicPath 路径
图片配置loader时候options选项中配置outputPath,选项， ‘images/’
10.html文件中引入img是如何处理
使用html-withimg-loader 这个loader , 在rules 中进行配置
11.less和sass的打包与分离
less: less 需要下这两个包 less less-loader,
sass ： node-sass sass-loader, 注意 分离和css。less ,sass 三个的分离方式一样，注意sass 插件，文件后缀是 .scss
12.消除无用的 css 需要使用webpack的插件 purifycss, 需要下载 purifycss-webpack基于 purify-css，所以两个都需要下载
在配置文件中 ，首先引入node 的glob 模块，再引入 purifycss-webpack插件，在plugins选项中进行配置
13.打包之后的代码如何调试
devtool :配置项，source-map 生产独立的map文件， 独立，包括行与列，就是指提示错误的时候，提示第几行第几列，打包最慢，包含内容多
cheap-module-source- map 只包括行的 map ，就是提示错误的时候只报第几行，独立性，单独的.map文件
eval-source-map 不会单独生产独立的map文件，有安全问题，一定在开发阶段，有性能稳定,包括行列
cheap-module-eval-source-map ，只包括行、
devtool: 开发调试模式，设置开发调试模式
14.babel 相关配置，下载依赖包 babel-core 核心 babel-loader , 需要转换的语法 babel-preset-es2015 babel-preset-react,
在配置项，rules中配置需要转换的文件 如 ： js/jsx 要转化， 排除node_modules(exclude属性排除)，及相关的配置项，由于options{}对象中需要配置的东西比较多，故因此需要专门建一个babel的配置文件，放在根目录中 建立一个 .babelrc的文件，里面放一个json对象
只配置es2015就是es6语法可以转化，如果是es7,es8的话需要安装 babel-preset-env, es6 es7 es8 都可以转换，所以在babel的配置文件,babelrc中，配置一个env就可以啦
15.模块化配置配置webpack.config.js文件
16，环境区分， --save-dev 安装开发依赖，在pakeage.json文件下 devDepencice中存放， --save 开发依赖， 在depanceice存放
node 指令传值 set type=dev&webpack 使用process.env.type === 'dev'，
17.webpack自动打包， webpack --watch，这个指令就是可以更改文件后自动打包，但是有时候需要配置项，在webpack.config.js中，需要配置watchOptions选项
18.打包之后文件 的署名信息， 通过webpack的一个自带的插件 webpack.BannerPlugin('署名信息')
19，引入第三方库，如 jquery vue react ,需要使用webpack自带的插件 webpack.ProvidePlugin({jquery: 'jquery'}),先下载依赖包
20.集中拷贝静态资源， ，使用webpack的插件，需要单独下载， copy-webpack-plugin, 使用方法 ：new copyWebpackPlugin([{
from: __dirname+'/src/public',// 拷贝的目标路径
to: './public' // 放到的位置， 相对位置，相对于出口设置的位置，也就是 dist目录下
}])
21.设置 json文件，要是用的，就是普通文件的引入，另外，低版本的 webpack 直接webpack-dev-server 命令不会自动刷新的话，需要设置一个webpack的插件 webpack.HotModuleReplacementPlugin()
22.webpack优化小技巧（黑技能）
a.引入第三方库的时候，不要在js文件中引用 ，在配置文件中配置 webpack.provideplugin(),好处：js文件中使用了第三方库才会打包第三方库，不使用的情况，不会给打包
b.抽离入口文件，公共文件 new webpack.optimize.CommonsChunkPlugin（{}）
23 . webpack.js.org
网友评论