- 安装
- 配置文件
- 配置入口以及出口文件
- 热更新
- css文件打包
- js文件打包
- html文件打包
- 图片处理
- css分离
- 通过src引入img
- 打包和分离stylus
- postcss浏览器前缀
- 去掉无用的css
- babel
- 调试
WebPack是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言,并将其转换和打包为合适的格式供浏览器使用。
npm install -g webpack npm init
会生成一个package.json
然后在此文件夹输入
npm install --save-dev webpack
注意:不可以让package.json的name为webpack
安装后会生成一个package-lock.json文件,用来记录当前状态下实际安装的各个npm package的具体来源和版本号
更新:如果有老项目但是不想把之前的依赖包删除进入package.json中,
"devDependencies": { "webpack": "^3.10.0" }
版本号改成最新的,然后删除node_moudules;在运行 npm install就可以了
新建一个文件夹src 放所有的源文件夹;
再建一个文件夹dist 放所有的生产后的文件
webpack.config.js
基本结构
module.exports={ entry:{}, //入口文件的配置项 output:{}, //出口文件的配置项 module:{}, //模块:例如解读CSS,图片如何转换,压缩 plugins:[], //插件,用于生产模版和各项功能 devServer:{} //配置webpack开发服务功能 }
const path = require('path'); module.exports = { entry:{ entry:'./src/entry.js' }, output:{ // 绝对路径 path:path.resolve(__dirname,'dist'), filename:'bundle.js' } }
多入口多出口
entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, output:{ path:path.resolve(__dirname,'dist'), filename:'[name].js' },
devServer:{ contentBase:path.resolve(__dirname,'dist'), host:'IP地址(或者localhost)', compress:true, //服务器压缩 port:8000 }
host尽量用ip地址在终端输入ipconfig查看ip地址
运行前需要在开发环境安装webpack-dev-server
npm install webpack-dev-server --save-dev
安装后发现:
webpack-dev-server 不是内部或外部命令,也不是可运行的程序
或批处理文件。
这是因为它安装在node_module中,解决办法是在package.json中修改
script
"scripts": { "server": "webpack-dev-server --open" }
然后在终端运行 npm run server
- 步骤1:需要两个加载器
style-loader,css-loader - 步骤2:在
module中添加rules - 步骤3:引入样式
// 处理url npm install style-loader --save-dev // 处理样式,标签 npm install css-loader --save-dev
在module中添加rules
module:{ rules:[ { test:/\.css$/, use:[{ loader:'style-loader' },{ loader:'css-loader' }] } ] }
在entry.js中引入样式
import css from './css/index.css';
一般在生产环境不会压缩,不然难调试
- 步骤1:引入包
uglifyjs-webpack-plugin - 步骤2:在
plugins中添加new uglify()
引入包 uglifyjs-webpack-plugin(不用单独npm install)
const uglify = require('uglifyjs-webpack-plugin');
在plugins中添加new uglify()
plugins:[ new uglify() ]
- 步骤1:引入包
html-webpack-plugin(需要npm install) - 步骤2:在
plugins中添加htmlPlugin
const htmlPlugin = require('html-webpack-plugin');
安装 html-webpack-plugin
npm install --save-dev html-webpack-plugin
然后在plugins添加htmlPlugin
plugins:[ new htmlPlugin({ minify:{ removeAttributeQuotes:true }, hash:true, template:'./src/index.html' }) ]
安装
npm install --save-dev file-loader url-loader
配置
//模块:例如解读CSS,图片如何转换,压缩 module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },{ test:/\.(png|jpg|gif|jpeg)$/ , use:[{ loader:'url-loader', options:{ limit:5000 } }] } ] },
1、安装 extract-text-webpack-plugin 插件
npm install extract-text-webpack-plugin --save-dev
在webpack.config.js文件引入插件(loader不需要引入,插件必须引入)
const extractTextPlugin = require("extract-text-webpack-plugin")
2、在配置文件中导入插件
module: { rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ new extractTextPlugin('css/index.css') ]
分离之后图片路径就不对了,解决办法设置一个绝对路径
const website = { publicPath: 'http://192.168.1.109:9527/' } // module.exports output: { path: path.resolve(__dirname, 'dist'), // 绝对路径 filename: 'bundle.js', publicPath: website.publicPath },
之前引入图片都是以背景方式才可引入
现在则要用img标签引入,需要用到插件html-loader
安装
npm install --save-dev html-loader
module: { rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ test:/\.(png|jpg|gif|jpeg)$/ , use:[{ loader:'url-loader', options:{ limit:5000, outputPath:'images/', } }] }, { test: /\.(htm|html)$/i, use: [{ loader: 'html-loader' }] } ] },
首先安装
npm install stylus-loader stylus --save-dev
要在entry.js引入
import stylus from './css/coral.styl';
webpack.config.js
{ test: /\.styl$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "stylus-loader" }], // use style-loader in development fallback: "style-loader" }) }
安装loader
npm install --save-dev postcss-loader autoprefixer
引用
rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", "postcss-loader"] }) }
创建postcss.config.js文件
module.exports = { plugins: [ require('autoprefixer') ] }
安装
npm i -D purifycss-webpack purify-css
引入
webpack.config.js
const glob = require('glob') const PurifyCssPlugin = require('purifycss-webpack')
安装
npm install --save-dev babel-loader babel-core babel-preset-es2015
支持ES7,ES8
安装npm install --save-dev babel-preset-env
引入
{ test: /\.js$/, use: { loader: 'babel-loader', }, // 忽视 exclude: /node_modules/ }
新建文件.babelrc
{ "presets": ["env"] }
/** * source-map 独立map 行 列 时间长 内容详细 * cheap-moudle-source-map 独立 行 不包括列 * eval-source-map 开发阶段 上线删除 行 列 * cheap-moudle-eval-source-map 列 */ devtool: 'eval-source-map',//开发阶段 调试