webpack可以将模块化文件进行打包，（不适用模块化会有变量冲突等问题）处理成浏览器可以识别的js文件，浏览器不识别common.js es6等模块化语法
1、
首先创建文件夹，添加两个js文件，用模块化方式开发，然后添加html，一般都是在html中使用script标签引入js文件，但是模块化之后需要webpack打包，html中引入打包后的js文件
文件目录如下
mathUtils.js
function add(num1, num2)
{
return num1+num2;
}
function mul(num1, num2)
{
return num1*num2;
}
module.exports={
add,
mul
}
info.js
export const info1 = "我是info1";
export const info2 = "我是info2";
main.js
const { add, mul} = require('./mathUtils'); //common.js模块化
console.log(add(1, 2));
import { info1, info1} from './info'; //ES6模块化引入
console.log(info1, info2);
然后用webpack打包 在当前文件下执行webpack ./src/main.js ./dist/bundle.js，将main.js文件及其引入的文件打包到dist文件夹下的bundle.js
index.html引入改文件
浏览器即可打该html文件
2、
由于用命令确定打包文件与打包路径太麻烦，于是有了配置文件，可以通过一个npm run serve命令，直接读取配置文件，将js sass(打包成css)等文件webpack打包，由index.html引入并且运行HTML文件到浏览器
由于配置打包路径需要相对路径，以便index.html根据相对路径引入打包后的文件，但是webpack打包文件只支持绝对路径，所以需要node的一个包获取当前文件的绝对路径，以达到根据当前文件达到打包的文件路径
首先，需要在当前文件夹下执行npm init命令，加载npm的基础包
此时会生成package.json文件，同事需要手动创建webpack.config.js文件配置打包参数。目录如下
webpack.config.js
const path = requre('path'); // 引入node的path模块
module.exports= {
entry: './src/main.js', //打包入口
output: {
path: path.resolve(_dirname, 'dist'), // _diname代表当前文件的绝对路径的文件夹，后面为自定义路径
name: 'bundle.js'
}
}
配置完webpack的配置，刚才说一般执行npm run serve 命令，那么你屏幕run serve怎么触发webpack打包操作的呢？
Npm init后生成package.json文件，该文件有个scripts脚本标签，
如上图，执行npm run build 就会根据package.json文件里的映射执行webpack命令，然后找到webpack的配置文件执行打包操作。
另外配置脚本（package.json scripts下）的webpack执行的是本地的webpack，而前面webpack ./src.main.js ./dist/bundle.js执行全局安装的webpack，本地安装的webpack会在项目的node_modules文件下，
执行npm install就会将package.json里的依赖下载到node_modules下,
另外npm install会安装全局与本地依赖，npm install --dev才会安装到项目下
3、上面根据配置文件打包js文件，然而css文件也是需要打包，如果按照上面的配置，执行Npm run build 或者webpack命令会报错，显示css文件打包错误。其实打包css文件也需要安装相关依赖并配置一下webpack.config.js文件才可以打包css
npm install css-loader --save --dev
npm install style-loader --save --dev
webpack.config.js
// 读取配置文件是会加载相关依赖
const path = requre('path'); // 引入node的path模块
module.exports= {
entry: './src/main.js', //打包入口
output: {
path: path.resolve(_dirname, 'dist'), // _diname代表当前文件的绝对路径的文件夹，后面为自定义路径
name: 'bundle.js'
},
module:{
rules:[
test: /\.css&/,
// style-loader 将style加载到DOM
// css-loader 打包css文件
// 注意顺序不能错，详情可看官网
use:['style-loader','css-loader',]
]
}
}
5、
前面说了打包时解析css文件，项目中可能也会用到less，按照以上配置不能解析相关less文件，出现打包错误，所以需要安装关于解析less的loader（前面已经安装并配置了关于解析css的loader）
执行 npm install --save-dev less-loader less (两个包)
const path = requre('path'); // 引入node的path模块
module.exports= {
entry: './src/main.js', //打包入口
output: {
path: path.resolve(_dirname, 'dist'), // _diname代表当前文件的绝对路径的文件夹，后面为自定义路径
name: 'bundle.js'
},
module:{
rules:[
{test: /\.css&/,
// style-loader 将style加载到DOM
// css-loader 打包css文件
// 注意顺序不能错，详情可看官网
use:['style-loader','css-loader']
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
]
}
}
6、页面或者css也会用到图片，此时打包回提示ERROR IN /src/test.jpg module parse failed图片打包错误
同理，我们需要解析图片的loader
运行npm install --save-dev url-loader
webpack.configure.js
module.exports= {
entry: './src/main.js', //打包入口
output: {
path: path.resolve(_dirname, 'dist'), // _diname代表当前文件的绝对路径的文件夹，后面为自定义路径
name: 'bundle.js'
},
module:{
rules:[
{test: /\.css&/,
// style-loader 将style加载到DOM
// css-loader 打包css文件
// 注意顺序不能错，详情可看官网
use:['style-loader','css-loader']
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
}
]
}
}
引入图片需要url("…/test.png"), 所以需要url-loader打包器，将图片转化为base64，limit代表解析的图片大小，如果引入的图片大小大于limit（单位是B），会报Cannot find module ‘file-loader’,这是因为先执行url-loader,如果超过limit限制，去执行file-loader,
此时你可以\npm install file-loader --save-dev, 然后运行npm run build打包，会发现图片并未生效，查看路径你会发现
路径指向的是哈希算法计算后的文件名称，而不是你原本定义的图片名称，这是因为file-loader将图片打包到了dist文件夹下，
所以你需要在webpack.configure.js下添加定义引用文件路径的根路径，来解决打包后文件名称及地址变为打包文件夹和哈希值文件名找不到的问题，改一下配置
添加一个publicPath属性，定义引文件的根路径，由于打包daodist文件夹下的名称全是hash值，我想让它是原来的名字呢？由于图片全部打包在dist文件夹下，所以相同文件会出现重复，所以一般采取原文件名称后面跟hash值来区分，需要配置一下，
配置图片打包的name’属性即可更改打包的文件名
7、由于有的浏览器不支持ES6，结下来配置ES6->ES5以便项目兼容性更好。
安装依赖：npm install -D babel-loader @babel/core @babel/preset-env
配置配置文件，在Module.config.js下的module属性里添加loader
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
配置完在打包你会发现Bundle.js下的文件不会有cont let箭头函数了；
8、接下来使用vue
首先安装： npm install vue --save
然后在你的index.js/main.js下引入vue
import Vue from 'vue'
const app = new Vue({
el: "app",
data: function()
{
return { mesg:"hello vue" }
}
})
然后在webpack.config.js下配置vue的引入路径(import vue的vue对象)
前面为vue对象，后面为vue在node_module下的路径
9、前面通过配置正常加载vue文件，此时我们可以创建vue组件，但是是普通js语法
`
<div id="app">
<runoob></runoob>
</div>
<script>
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
但是为了方便，我们需要用vue文件来创建组件
<template>
</template>
<script>
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
</script>
<style scoped>
</style>
由于webpack不识别.vue文件（类似于前面的css文件），需要导入相关依赖 npm install vue-loader vue-template-complier --save-dev
// 配置加载vue文件
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader']
}
}
]
}
可能会报下面的错误，那是因为vue版本更新年后需要安装插件，版本退回到13以下即可
另外，引入vue文件省略.vue后缀需要配置一下
10、配置插件
配置打包后的版权提示
11、打包后index文件没有打包进dist文件夹内，需要HtmlWebpackPlugin插件
npm install html-wepack-plugin --save-dev
const path = requre('path'); // 引入node的path模块
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyPlugin= require('uglifyjd-webpack-plugin')
module.exports= {
entry: './src/main.js', //打包入口
output: {
path: path.resolve(_dirname, 'dist'), // _diname代表当前文件的绝对路径的文件夹，后面为自定义路径
fileName: 'bundle.js',
// publicPath: 'dist/' 在这里就不需要了
},
module:{
rules:[
{test: /\.css&/,
// style-loader 将style加载到DOM
// css-loader 打包css文件
// 注意顺序不能错，详情可看官网
use:['style-loader','css-loader']
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
]
}
plugins: [
new webpack.BannerPlugin('版权信息'),
new htmlWebpackPlugin({
template: 'index.html'
}), //将index.html打包到dist,并将bundles.js引入到index.html
new uglifyPlugin()
]
devServer:{ // 本地直接执行打包运行
contenBase: './dist',
inline: true
}
}
12、压缩打包文件
npm install uglifyjs-webpack-plugin --save -dev
见上
13、配置webpack-dev-sever热部署
npm install webpack-dev-server --save-dev
配置见上，package.json script添加配置
“dev”: “webpack-dev-sever --open”
其中–open代表启动项目直接打开浏览器
执行npm run dev会把打包在内存中，而不是dist文件夹下
扫一扫
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
