注：本章将配合Vue详细讲解webpack
前提条件
1.在开始之前，请确保安装了 Node.js 和npm的最新版本。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。
在 cmd 中node -v,npm -v可查看对应的版本和安装情况。
2.这里会用到ES6的模块化，如果你了解可以直接开始，不了解请看关于ES6模块化的文章。
(作者会更新ES6模块化)
webpack是什么
webpack可以理解成打包工具。
webpack更强调的是模块化。而文件合并，预处理等功能，是它附带的功能。如果项目使用了模块化管理，而且互相依赖非常强，我们就可以使用更强大的webpack。
grunt/gulp更强调的是前端流程的自动化，模块化不是它的核心如果你的工程模块依赖非常简单，甚至没有用模块化的概念，只需要简单的进行合并，压缩，就使用grunt/gulp。
安装webpack
// 安装webpack
npm install webpack@3.6.0 -g
// 查看版本：
webpack -veison
// 清除node缓存：
npm cache clean -f
// 卸载全局：
npm uninstall webpack -g
安装完成后就可以使用 webpack 将你的代码打包。
打包代码：
webpack ./src/main.js ./dist/bundle.js
webpack：参数1 参数2
参数1是你的入口文件(主文件)
参数2是打包后的文件目录
打包后在目录下 dist/bundle.js 就会产生一个bundle.js的文件，这个文件就是打包后的文件。
配置webpack.config.js：
首先创建你的项目文件夹 XXX。
在项目下创建 webpack.config.js 并配置好以下内容：
const path = require('path'); //在node (全局) 中寻找 path 包
module.exports = {
entry: './src/main.js', //入口文件
output: { //出口文件
path: path.resolve(__dirname, 'dist'), //出口文件路径
filename: 'bundle.js' //出口文件名字
},
}
webpack.config.js是这个项目的配置文件，所有配置以后都写在这里面。
npm init 自动创建package.json
在项目终端目录下 npm init：会帮助你安装一个package.json的文件，如下：
npm init
{
"name": "meetwebpack", //项目名字
"version": "1.0.0", //版本
"description": "", //描述
"main": "index.js", //入口路径
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "hollow", //作者
"license": "ISC" //许可证
}
然后再 npm install 安装依赖。
之后就可以直接用 webpack 打包项目，不在使用麻烦的写 webpack ./src/main.js ./dist/bundle.js 打包了。
npm run build
作用：把 webpack 映射到 npm run build 上，用 npm run build 进行打包在 package.json 文件中的 "scripts" 中添加 "build": "webpack"。如下：
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", //这里是新添加的
},
"author": "hollow",
"license": "ISC"
}
npm run XXX 就是在 scripts 中找 XXX 然后执行后面的语句，例如 npm run build,就是执行了 webpack。
npm install webpack@3.6.0 --save-dev
局部安装 webpack ：因为考虑到有些 clone 的项目和自己全局安装的 webpack 版本不一样从而导致打包失败，所以每个项目都需要安装局部 webpack
注：在使用局部打包的时候一定要用
npm run build进行打包，因为npm run build才会在本地node_modules/bin路径中找命令进行打包，如果没有找到，才会去全局的环境变量中寻找。
配置webpack css
1.在项目下安装 css 依赖：
npm install --save-dev css-loader
2.修改 webpack.config.js rulse 文件,对 css 依赖进行配置。
module.exports = {
module: {
rules: [
// css 文件打包配置
{
test: /\.css$/,
// css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
// style-loader 将模块的导出作为样式添加到 DOM 中
// 使用多个loader时，是从右向左，所以stype-loader在css-loader前面
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
3.安装 style 依赖(安装这个依赖才能真正的将样式添加到 DOM 上)：
npm install --save-dev style-loader
4.在 main.js 中引用 css 文件：
require('./css/normall.css');
5.这时候才能真正的看到样式被添加到了 DOM 上。
配置webpack less
1.安装 less 依赖：
npm install --save-dev less-loader less
2.在 webpack.config.js rules 中进行 less 配置：
// less 文件打包配置
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
这时打包后的代码就能识别 less 文件了。
配置webpack 图片(url)：
1.在项目下安装图片 (url) 依赖：
npm install url-loader --save-dev
2.在 webpack.config.js rules 中进行配置：
// 图片打包配置
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载图片小于limit时，会将图片编译成base64字符串形式
// 当加载的图片大于limit时，需要使用 file-loader 模块进行加载
limit: 8192
name:'img/[name].[hash:8].[ext]'
}
}
]
}
这时安装配置 url 已经完成了，可以在 html 中添加一个 img 标签测试
3.对于太大的图片，我们建议安装 file-loader
npm install file-loader --save-dev
4.如果打包出来的图片没有显示并且网页上的链接显示 background: url([object Object]) 这是因为 file-loader 版本问题，所以对版本进行降级，替换的版本：
npm install file-loader@3.0.1 --save-dev -s
webpack ES6转ES5的babel
1.在项目下安装 ES6 语法处理的依赖：
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2.在 webpack.config.js rules 中进行配置：
// webpack ES6转ES5的配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
3.这个时候在打包就会自动把 ES6 语法转成 ES5 语法
配置 webpack Vue.js
1.在项目下的安装Vue.js：
npm install vue --save
2.在 js 文件中导入 Vue ：在导入中会自动去 node_modules 中去找 Vue 包，导入之后就能使用 Vue了
import Vue from 'vue';
3.在 webpack.config.js 中配置 vue.js 的引用：
// 配置 Vue.js 的引用
resolve: {
// alias:别名
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
}
注：
resolve、module、output、entry是同一级别
webpack 配置 .vue 文件依赖
1.在项目下安装 .vue 文件依赖：
npm install --save-dev vue-loader vue-template-compiler
2.在 webpack.config.js 中配置 .vue :
// .vue 文件的配置
{
test:/\.vue$/,
use:['vue-loader']
}
3.引用 .vue 文件：
import App from './vue/App.vue
webpack 配置 plugin(横幅)
1.在 webpack.config.js 中配置 plugins ：
先引用 webpack
const webpack = require('webpack'); //在 node(全局) 中寻找 webpack 包——用来配置横幅的(版权)
然后在 webpack.config.js 中添加 plugins
// 横幅的配置(版权)
plugins:[
new webpack.BannerPlugin('最终版权归hollow所有'),
]
注：
plugins、resolve、module、output、entry是同一级别的
webpack 配置 HtmlWebpackPlugin
1.在项目下安装 HtmlWebpackPlugin 依赖：
npm install html-webpack-plugin --save-dev
2.在 webpack.config.is 中配置 plugins
先引用 plugins：
const HtmlWebpackPlugin = require('html-webpack-plugin'); //在 node(全局) 中寻找
然后在 plugins 中添加 new HtmlWebpackPlugin()
plugins:[
new webpack.BannerPlugin('最终版权归hollow所有'),
new HtmlWebpackPlugin(),
]
3.让 HtmlWebpackPlugin 根据模板来生成新的 html 文件：
因为新生成的文件没有包含 <div id='app'></div>
所以我们要修改 webpack.config.js 中的 plugins 里的 new HtmlWebpackPlugin 来进行模板配置：
// 横幅的配置(版权)
plugins:[
new webpack.BannerPlugin('最终版权归hollow所有'),
new HtmlWebpackPlugin({
template: 'index.html',
}),
]
webpack 中配置 uglifyjsWebpackPlugin
1.在项目下安装依赖：
npm install uglifyjs-webpack-plugin --save-dev
2.在 webpack.config.js 中配置 UglifyjsWebpackPlugin
先引用 UglifyjsWebpackPlugin
// 在mode(全局) 中寻找uglifyjs-webpack-plugin(用来压缩js代码的)
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
然后在 plugins 中添加 new UglifyjsWebpackPlugin()
plugins:[
new webpack.BannerPlugin('最终版权归hollow所有'),
new HtmlWebpackPlugin({
template: 'index.html',
}),
new UglifyjsWebpackPlugin(),
]
webpack-dev-server搭建本地服务器
1.在项目下安装依赖：
npm install webpack-dev-server --save-dev
2.在 webpack.config.js 中配置 devServer :
// 本地服务的配置
devServer: {
contentBase:'./dist',
inline:true,
}
注：
devServer、plugins、resolve、module、output、entry是同一级别
3.在 package.json 中的 scripts 进行配置：
"dev":"webpack-dev-server --open"
加入这行代码表示，以后只需要 npm run dev 就能进行测试我们修改过的代码。如果没有问题再 nmp run build 进行打包
注：
--open表示在npm run dev之后，会自动帮我们打开浏览器
webpack-配置文件的分离
1.在项目下建一个 build 的文件夹，并且在 build 文件夹中创建 base.config.js、dev.config.js、prod.config.js 文件
base.config.js
公共的东西放在这里面
// 公共的
const path = require('path'); //在node (全局) 中寻找 path 包——用来配置出口文件路径的
const webpack = require('webpack'); //在 node(全局) 中寻找 webpack 包——用来配置横幅的(版权)
const HtmlWebpackPlugin = require('html-webpack-plugin'); //在 node(全局) 中寻找 html-webpack-plugin 包(用来webpack自动帮我们生成一个最终html文件)
module.exports = {
entry: './src/main.js', //入口文件
output: { //出口文件
path: path.resolve(__dirname, 'dist'), //出口文件路径
filename: 'bundle.js', //出口文件名字
// publicPath: 'dist/'
},
module: {
rules: [
// css 文件打包配置
{
test: /\.css$/,
// css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
// style-loader 将模块的导出作为样式添加到 DOM 中
// 使用多个loader时，是从右向左，所以stype-loader在css-loader前面
use: [ 'style-loader', 'css-loader' ]
},
// less 文件打包配置
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
// 图片打包配置
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载图片小于limit时，会将图片编译成base64字符串形式
// 当加载的图片大于limit时，需要使用 file-loader 模块进行加载
limit: 8192,
name:'img/[name].[hash:8].[ext]'
},
}
]
},
// webpack ES6转ES5的配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
// .vue 文件的配置
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
// 配置 Vue.js 的引用
resolve: {
// alias:别名
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
},
// 横幅的配置(版权)
plugins:[
new webpack.BannerPlugin('最终版权归hollow所有'),
new HtmlWebpackPlugin({
template: 'index.html',
}),
],
}
dev.config.js
开发时依赖的东西放在这里面
// 开发时依赖的
module.exports = {
devServer: {
contentBase:'./dist',
inline:true,
}
}
prod.config.js
编译时依赖的东西放在这里面
// 编译时依赖的
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); // 在mode(全局) 中寻找uglifyjs-webpack-plugin(用来压缩js代码的)
module.exports = {
plugins:[
new UglifyjsWebpackPlugin(),
],
}
2.在项目文件下安装 webpack-merge 依赖：
npm install webpack-merge@4.1.5 --save-dev
3.在 prod.comfig.js 中配置 webpackMerge 和 baseConfig
先导入依赖：
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
然后再配置依赖：
module.exports = webpackMerge(baseConfig, {
plugins:[
new UglifyjsWebpackPlugin(),
],
})
4.在 dev.config.js 中配置 webpackMerge 和 baseConfig
先导入依赖：
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
然后再配置依赖:
module.exports = webpackMerge(baseConfig, {
devServer: {
contentBase:'./dist',
inline:true,
}
})
5.修改 package.json 中 scripts 的配置：
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
6.修改 base.config.js 中 output 中 path 的路径：
output: { //出口文件
path: path.resolve(__dirname, '../dist'), //出口文件路径
filename: 'bundle.js', //出口文件名字
// publicPath: 'dist/'
},
下一篇 Vue-cli
Vue-cli会自动帮我们生成上面所有的代码，不用我们一个个去单独配置
原文地址：https://www.cnblogs.com/hollows/p/14016110.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。