webpack 学习总结demo

github源码地址 https://github.com/ghshuo/webpack-demo

webpack介绍

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

学习文档 :

• webpack官网: http://webpack.github.io/
• webpack文档(英文): https://webpack.js.org/
• webpack文档(中文): https://doc.webpack-china.org/

安装

1.全局安装webpack

npm install webpack -gnpm install webpack@3.xx -g 可以规定webpack的安装版本

2.初始化

3.项目中局部安装

npm install webpack --save-dev

webpack.config.js配置

1.entry选项（入口配置）

entry:{entry: ‘./src/entry.js‘,}

2.entry选项（出口配置）

output:{path: path.resolve(__dirname,‘dist‘), // 出口地址 绝对路径filename:‘[name].js‘ // //输出的文件名称}

3.module模块

解读css

安装

npm install style-loader --save-devnpm install --save-dev css-loader

module模块中配置

module:{rules: [{test: /\.css$/,use: [ ‘style-loader‘, ‘css-loader‘ ]}]},

配置图片

* npm install --save-dev file-loader url-loader* file-loader 解决引用路径的问题* url-loader 如果图片较多，会发很多http请求，会降低页面性能。

{ // 配置图片test: /\.(png|jpg|gif)/,use:[{loader:‘url-loader‘, // url-loaderoptions:{limit:400000, // 是把小于400000B的文件打成Base64的格式outputPath:‘images/‘ // 把图片打包到指定路径下}}]}

直接在文件中引用img图片

npm install html-withimg-loader --save

{test: /\.(htm|html)$/i,use:[ ‘html-withimg-loader‘] }

4.plugins插件

压缩代码

* 引入： 不需要安装 const uglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);

配置plugins:[new uglifyJsPlugin() ]

html 打包

* npm install --save-dev html-webpack-plugin

const htmlPlugin = require(‘html-webpack-plugin‘);plugins:[new htmlPlugin({minify:{removeAttributeQuotes:true // minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。},hash:true, // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。template:‘./src/index.html‘ //是要打包的html模版路径和文件名称})]

5.热更新功能

npm install webpack-dev-server --save-dev

再设置

devServer:{//设置基本目录结构contentBase:path.resolve(__dirname,‘dist‘),//服务器的IP地址，可以使用IP也可以使用localhosthost:‘localhost‘,//服务端压缩是否开启compress:true,//配置服务端口号， 可以自己设置端口号port: 1818}

一般直接启动 npm run server 查看就能进行热更新

如果不能进行热更新添加 HotModuleReplacementPlugin插件

plugins 中配置

new webpack.HotModuleReplacementPlugin()

6.CSS分离与图片路径处理

把CSS单独提取出来，分离css

npm n install --save-dev extract-text-webpack-plugin

const extractTextPlugin = require("extract-text-webpack-plugin");plugins[new extractTextPlugin("/css/index.css")]再配置下模块module:{rules:[{test: /\.css$/,use: extractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})}]}分离出来之后css路径不正确 需要下面修改下var filePath = {publicPath: "http://localhost:1818/" // 声明一个路径 处理静态文件路径}//出口文件的配置项output:{publicPath:website.publicPath}

安装css预编译语言

1.less

npm install --save-dev lessnpm install --save-dev less-loader

webpack.config.js
配置less

{test: /\.less$/,use: [{loader: "style-loader" }, {loader: "css-loader" , {loader: "less-loader"}]}

less 分离

npm n install --save-dev extract-text-webpack-pluginconst extractTextPlugin = require("extract-text-webpack-plugin");plugins[new extractTextPlugin("/css/index.css")]use:extractTextPlugin.extract({use:[{loader:‘css-loader‘},{loader:‘less-loader‘}],fallback:‘style-loader‘})

2.sass

npm install --save-dev node-sassnpm install --save-dev sass-loader

{test: /\.scss$/,use: extractTextPlugin.extract({use: [{loader: "css-loader"}, {loader: "sass-loader"}],fallback: "style-loader"})}

自动处理css3属性前戳

需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）

npm n install --save-dev postcss-loader autoprefixer

在webpack.config.js同级目录下新建一个postcss.config.js文件

module.exports = {plugins: [require(‘autoprefixer‘)]}

loader配置

{test: /\.css$/,use: extractTextPlugin.extract({fallback: ‘style-loader‘,use: [{ loader: ‘css-loader‘, options: { importLoaders: 1 } },‘postcss-loader‘]})}

消除未使用的CSS

安装PurifyCSS-webpack

npm i -D purifycss-webpack purify-css

引入glob
因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

constc glob = require(‘glob‘);

引入purifycss-webapck

constc PurifyCSSPlugin = require("purifycss-webpack");

配置plugins

new PurifyCSSPlugin({paths: glob.sync(path.join(__dirname, ‘src/*.html‘)),})

babel

把es6 转化成es5 语法

npm i -D babel-loader babel-core babel-preset-env babel-polyfill

module中配置

{test:/\.(jsx|js)$/,use:{loader:‘babel-loader‘,},exclude:/node_modules/}

配置babel预设文件
在根目录下创建一个.babelrc文件

{"presets": ["env"]}

打包调试

source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。

module.exports = {devtool: ‘eval-source-map‘,}}

配置生产和开发并行

修改package.json命令

其实就是添加一个dev设置，并通过环境变量来进行区分，下面是package.json里的值。

"scripts": {"server": "webpack-dev-server --open","dev":"set type=dev&webapck","build": "set type=build&webpack"}

修改webpack.config.js文件

if(process.env.type == "build"){var filePath = {publicPath: "线上地址/"}}else{var filePath = {publicPath: "本地地址/"}}

打印传递过来的值

console.log( encodeURIComponent(process.env.type) );

引用第三方库

安装

npm install --save jquery

用plugin 引入 ProvidePlugin插件

constc webpack = require(‘webpack‘);

webpack.config.js中plugins配置

plugins:[new webpack.ProvidePlugin({$:"jquery"})]

watch 用法

随着项目大了，项目进行联调时,我们不需要每一次都去打包，使用watch解决了这个麻烦，只要代码进行保存之后会自动进行打包。 watch是webpack中自带插件

watchOptions:{//检测修改的时间，以毫秒为单位poll:1000, //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作aggregateTimeout:500, //不监听的目录ignored:/node_modules/, }

但是运行这个插件 必须要引入webpack

const webpack = require(‘webpack‘); 

运行webpack --watch 进行打包

添加注释版权所有

BannerPlugin插件
js上添加z注释是谁写的 ，创建时间，都可以进行设置

new webpack.BannerPlugin(‘hsgeng版权所有‘)

多个第三方类库抽离

npm instawll vue --savenpm install --save jquery

入口文件配置

entry:{entry:‘./src/entry.js‘,jquery:‘jquery‘,vue:‘vue‘}

new webpack.optimize.CommonsChunkPlugin({//name对应入口文件中的名字，我们起的是jQueryname:[‘jquery‘,‘vue‘],//把文件打包到哪里，是一个路径filename:"assets/js/[name].js",//最小打包的文件模块数，这里直接写2就好minChunks:2})

静态资源输出

项目中有些没有引用的静态资源（图片、开发文档），想在打包的时候保留这些静态资源，可以直接打包到指定的文件夹下面

安装

npm install --save-dev copy-webpack-plugin

引入

const copyWebpackPlugin= require("copy-webpack-plugin");

plugins 进行配置

new copyWebpackPlugin([{from:__dirname+‘/src/public‘, // 要打包的静态资源目录地址to:‘./public‘ // 要打包到的文件夹路径，跟随output配置中的目录}])

json配置文件使用

入口文件中引用json

var json =require(‘../config.json‘);document.getElementById("json").innerHTML= json.name;

打包命令

webpack

运行

npm run server

总结

学习webpack过程中进行了总结。如果有什么不对地方，请大家指正一下，谢谢！

webpack 学习总结demo

原文地址：https://www.cnblogs.com/hsgeng/p/9146497.html