webpack4 打包
1. 基本安装及命令
npm config set registry https://registry.npm.taobao.org // 淘宝镜像
npm install webpack-cli -g // 安装之后才能 webpack -v
webpack index.js -o out.js // 打包指定文件 指定输出路径及名称
webpack --mode development index.js -o out.js // 指定打包方式为开发模式(默认为产品模式:去除console命令及其他未引用代码)
( src - dist 4.0版本默认不需配置《代码资源放置在src,生成的代码资源放置在dist 》,但也可以增加配置文件 webpack.config.js )
常用的 webpack.config.js
var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'out') } };
webpack --mode development // 只用 webpack,则默认为 production 模式,去除多余部分及调试提示
2. 合并打包
var path = require('path'); module.exports = { entry: ['./src/a.js','./src/b.js','./src/c.js'], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'out') } };
3. 分块打包
var path = require('path'); module.exports = { entry: { a:'./src/a.js', b:'./src/b.js', c:'./src/c.js' }, output: { filename: '[name].build.js', path: path.resolve(__dirname, 'out') } };
4. 配置属性为开发模式 mode: development
5.url-loader 处理小图片
npm init
npm install url-loader --save
npm install file-loader --save // 图片尺寸超过限制时使用
var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', publicPath: './out/', // 最后的 / 不可少,两个 out 对应,确保 生成的大文件图片路径正确 path: path.resolve(__dirname, 'out') }, mode:'production', module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] } ] } };
6. 引入 jquery expose-loader
npm install expose-loader --save-dev
npm install jquery --save
var path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', publicPath: './out/', // 最后的 / 不可少,两个 out 对应,确保 生成的大文件图片路径正确 path: path.resolve(__dirname, 'out') }, mode:'production', module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] }, { test: require.resolve('jquery'), loader: 'expose-loader?jQuery!expose-loader?$!expose-loader?scrollable' } ] } };
使用 import $ from 'expose-loader?$!jquery';
相关链接:
webpack:使用expose-loader 解决第三方库的插件依赖问题