webpack之入门
一、简单的命令实现webpack打包
package.json通过一个命令将入口文件打包成指定的文件里。
1.全局安装webpack和webpack-cli
npm i webpack webpack-cli -g
2.新建一个项目， 然后初始化
npm init
然后会生成一个package.json和 package-lock.json
3.在项目本地安装webpack和webpack-cli
npm i webpack webpack-cli -D
注： -D是--save-dev的缩写，-S是--save的缩写
区别：-D是只在开发环境即dev中使用，项目发布以后就不会使用到，如babel，loader等；-S是在开发和正式环境都会用到，如jQery，Vue等。
package.json中添加:
"build": "webpack "
image.png
npm run build 之后报错：
image.png
创建src文件夹，在src创建入口文件index.js：
src/index.js
console.log('i am entry file')
修改package.json：
"build": "webpack --mode production ./src/index.js --ouput ./dist/main.js"
npm run build之后dist文件夹多一个输出文件main.js.
image.png
二、简单的webpack文件配置
创建webpack.config.js文件并修改package.json:
"build": "webpack --config webpack.config.js"
webpack.config.js:
1、配置loader
webpack 自身只理解 JavaScript，loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。
在 webpack 的配置中 loader 有两个目标：
- test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
- use 属性，表示进行转换时，应该使用哪个 loader。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{test:/\.txt$/, use: 'raw-loader'}
]
}
}
2、配置plugins
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin') // npm安装
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js"
},
plugins: [
new HtmlWebpackplugin({template: 'index.html'})
],
module: {
rules: [
{test:/\.txt$/, use: 'raw-loader'}
],
}
};
webpack 提供许多开箱可用的插件。
3、模式
mode的参数有development 和production 两个选择。
| 选项 | 描述 |
|---|---|
| development | 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 |
| production | 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin. |
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin') // npm安装
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js"
},
plugins: [
new HtmlWebpackplugin({template: 'index.html'})
],
module: {
rules: [
{test:/\.txt$/, use: 'raw-loader'}
],
}
};
4、resolve解析
常见的resolve配置参数：
1、alias别名：创建 import 或 require 的别名，来确保模块引入变得更简单。
2、extensions：自动解析确定的扩展。
const path = require('path')
const HtmlWebpackplugin = require('html-webpack-plugin')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].js",
publicPath: "/assets/"
},
resolve: {
extensions: ['.js', 'json', '.vue'],
//
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
plugins: [
new HtmlWebpackplugin({template: 'index.html'})
],
module: {
rules: [
{test:/\.txt$/, use: 'raw-loader'}
],
}
};
比如extensions：
extensions: [".js", ".json", ".vue"]
能够使用户在引入模块时不带扩展：
import https from './utils/https' // 引入utils目录下的https.js可以省略‘.js’扩展。
比如alias：
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
能够使用户在引入模块时省略统一的目录前缀：
import template from '@/pages/template.vue' //引入/src/pages/template.vue可以省略统一的资源目录前缀src
npm run build打包成功
三、一个基础的vue应用
对上面的一步进行一些更高级的配置才能用于日常开发，以及生产环境。
1、热加载
npm install --save-dev webpack-dev-server
webpack.config.js
// 热加载
devServer: {
contentBase: './dist',
hot: true
}
package.json：
"start:dev": "webpack-dev-server --open"
npm run start:dev之后浏览器就开启热加载
2、加载css
npm install --save-dev style-loader css-loader
webpack.config.js
moudle: {
rules: [
{
test: /\.css$/,
use: [
// loader 处理是从下往上构建的
'style-loader',
'css-loader'
]
}
]
}
3、加载图片(字体)
npm insatll --save-dev file-loader
webpack.config.js：
moudle: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
4、开发环境使用source map 便于调试
当webpack打包代码是，会把所有的源文件打包到一个bundle.js中，对于错误的定位不是很方便，为了更方便调试，webpack提供了source map功能
webpack.config.js:
devtool: 'inline-source-map', //'inline-source-map'、 'source-map'、'cheap-eval-source-map'
5、Vue单文件结构
npm install --save-dev vue-loader vue-template-compiler
webpack.config.js :
const vueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
new vueLoaderPlugin()
]
6、编译ES6代码，兼容老浏览器
npm install --save-dev babel-loader babel-core
webpack.config.js ：
moudle: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
}
]
},
第四步：
image.png
webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'production',
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].min.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title:'Vue-webpack',
inject:'body',
filename:'index.html',
// template:path.resolve(__dirname, "index.html")
template: './index.html'
}),
new VueLoaderPlugin()
],
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
devServer: {
// contentBase: './dist',
contentBase: path.join(__dirname, 'dist'),
compress: true, // 启用gzip压缩
// hot: true,
port: 8080
},
performance: {
hints:false
},
module: {
rules: [
{
test: /\.css$/,
use: [
// loader 处理是从下往上构建的
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.vue$/,
use: ['vue-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
// devtool: 'inline-source-map', // 'source-map'、'cheap-eval-source-map'
}
main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
App.vue:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
router/index.js:
import Vue from 'vue'
import Router from 'vue-router'
import index from '../components/index.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: index
}
]
})
components/index.vue：
<template>
<div>
index
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
npm run start:dev项目就启动起来了。
启动项目发生警告：
image.png
解决方法是：在webpack.config.js中加上：
performance: {
hints:false
}
或者：
performance: {
hints: "warning", // 枚举
maxAssetSize: 30000000, // 整数类型（以字节为单位）
maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
}
