基础项目搭建
准备工作
# vscode 打开命令行
ctrl + `(esc下面的键)
# 在目录下面,初始化一个 npm项目
npm init
# 安装库
npm i webpack vue vue-loader
# 根据提示安装其他的库
npm i css-loader
npm i vue-template-compiler项目目录介绍
dist //将打包的资源输出目录
node_modules // 安装的库目录
src // 源码目录
app.vue // vue初始组件
index.js //入口文件
package.json //项目配置信息文件,在用 npm init命令后生成
webpack-config.js //webpack打包配置文件app.vue
// html代码
{{text}}
// js代码
// css代码
index.js
// 将组件挂载到vue当中
import Vue from 'vue'
import App from './app.vue'
// 将 vue组件挂载到一个 root节点中
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h)=>h(App)
}).$mount(root)webpack.config.js 打包配置
// webpack打包资源的配置 图片,js,html等
// node.js基础包
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
//程序入口文件,将当前的目录与后面的地址拼接
entry:path.join(__dirname,'src/index.js'),
//输出路径,webpack将 vue等信息打包为一个可以在浏览器运行的js文件
output:{
filename:'bundle.js',
path:path.joinnpm i style-loader url-loader file-loader(__dirname,'dist')
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
// 指定用什么处理 vue文件, webpack不能处理 vue文件
module:{
rules:[
{
test:/.vue$/,
loader:'vue-loader'
}
]
}
}package.json
{
"name": "todolist",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^2.1.0",
"vue": "^2.5.21",
"vue-loader": "^15.4.2",
"webpack": "^4.28.2"
}
} tips: 需要在此处配置,使用项目中的webpack ,在命令行中执行用的是全局的 webpack "build":"webpack --config webapck.config.js"
编译
npm run build
# 编译时可能提示需要安装库安装即可
# npm install -D webpack-cli编译问题
You may need an appropriate loader to handle this file type.?
webpack只能处理js es5的文件,对 vue类型的文件,不能处理,我们需要手动指定处理规则查看 bunde.js代码,在这个其实有 vue代码, webpack 做的就是把 静态资源打包成 js文件,便于浏览器处理
webpack静态资源的处理
安装库
npm i style-loader url-loader file-loader
npm i stylus stylus-loader配置信息
// webpack打包资源的配置 图片,js,html等
// node.js基础包
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
//程序入口文件,将当前的目录与后面的地址拼接
entry:path.join(__dirname,'src/index.js'),
//输出路径,webpack将 vue等信息打包为一个可以在浏览器运行的js文件
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
module:{
rules:[
{
// 指定vue-loader处理 vue文件, 处理 vue文件
test:/\.vue$/,
loader:'vue-loader'
},
{
//处理 css
test:/\.css$/,
// 使用css-loader读取内容,用 style-loader处理css写入到html代码中去
use:[
'style-loader',
'css-loader'
]
},
{
// css 预处理文件
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
// 图片处理的 loader
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
// 使用 url-loader(依赖于file-loader)处理 图片资源,options是要给url-loader传递的参数
loader:'url-loader',
options:{
// 如果文件的大小小于1024kb,将将其转换为base64代码,存入html中
limit:1024,
// 输出图片原先的名字
name:'[name]-rao.[ext]'
}
}
]
}
]
}
}那么配置之后,就可以在js代码中 import 非js内容. index.js文件
// 引入非js.代码
import Vue from 'vue'
import App from './app.vue'
import './assets/styles/todo.css'
import './assets/images/todo.png'
import './assets/styles/todo-stylus.styl'
// 将 vue组件挂载到一个 root节点中
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h)=>h(App)
}).$mount(root)webpack-dev-server的配置和使用
安装库
// 开发服务器
npm i webpack-dev-server
// 环境的切换 适应不同的平台
npm i cross-env
// html插件
npm i html-webpack-plugin在 package.json配置 dev-server
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
webpack.cofig.js配置
// webpack打包资源的配置 图片,js,html等
// node.js基础包
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
// 设置的环境变量存储在 process.env中
const isDev = process.env.NODE_ENV==='development'
const config ={
// 指定webpack的编译目标是web平台
target:'web',
//程序入口文件,将当前的目录与后面的地址拼接
entry:path.join(__dirname,'src/index.js'),
//输出路径,webpack将 vue等信息打包为一个可以在浏览器运行的js文件
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
new HTMLPlugin(),
// 定义一个环境变量 在这里定义了,在js代码中可以直接使用
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev ?'"development"':'"production"'
}
})
],
module:{
rules:[
{
// 指定vue-loader处理 vue文件, 处理 vue文件
test:/\.vue$/,
loader:'vue-loader'
},
{
//处理 css
test:/\.css$/,
// 使用css-loader读取内容,用 style-loader处理css写入到html代码中去
use:[
'style-loader',
'css-loader'
]
},
{
// css 预处理文件
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
// 图片处理的 loader
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
// 使用 url-loader(依赖于file-loader)处理 图片资源,options是要给url-loader传递的参数
loader:'url-loader',
options:{
// 如果文件的大小小于1024kb,将将其转换为base64代码,存入html中
limit:1024,
// 输出图片原先的名字
name:'[name]-rao.[ext]'
}
}
]
}
]
}
}
// 环境切换的判断
if (isDev){
// webpack打包后的js是转移的(如es6转程es5),在出错后不好定位,需要把转换后的js代码映射,这样我门
// 查看错误的时候,还是我们编写代码样式,便于定位
config.devtool ="#cheap-module-eval-source-map"
// 开发环境配置
config.devServer= {
port:'8001',
// 设置成 0.0.0.0可以通过 localhost,127.0.0.1,本机ip进行访问
host:'0.0.0.0',
//如果有错直接显示在网页上面
overlay:{
errors:true
},
// // 将server不理解的地址,映射首页
// historyFallback:{
// },
//在启动的时候自动打开浏览器
open:true,
// 只渲染当前组件的效果,不会整个项目重新渲染
hot:true
}
config.plugins.push(
// 热加载需要的插件
new webpack.HotModuleReplacementPlugin(),
// 过滤一些不需要的信息
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports =config配置vue的jsx写法和 postcss
安装库,在安装过程中可能提示缺少库,根据提示安装即可
npm i postcss-loader autoprefixer babel-loader babel-core
npm i babel-preset-env babel-plugin-transform-vue-jsx
tps:jsx就是把html代码写在js中,相比vue可能更加的灵活
项目目录下新建文件
// babe使用
.babelrc
// postcss使用
postcss.config.js.babelrc文件
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx" // 处理 vue中的jsx
]
}webpack.congif.js配置处理 jsx
{
// 处理 jsx 文件
test:/\.jsx/,
loader:'babel-loader'
},
...
{
// css 预处理文件
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader',
{
loader:'postcss-loader',
// stylus-loader会生成sourcemap ,而postcss-loader也会生成sourcemanp,该项配置直接使用前面的sourcemap
options:{
sourceMap:true,
}
}
]
},打包的配置
css单独分离打包和 vue等类库单独打包
// 安装插件
npm i extract-text-webpack-pluginwebpack.config.js配置
// 环境切换的判断
if (isDev) {
// 开发环境使用的 styl样式
config.module.rules.push({
// css 预处理文件
test: /\.styl/,
use: [
"style-loader",
"css-loader",
"stylus-loader",
{
loader: "postcss-loader",
// stylus-loader会生成sourcemap ,而postcss-loader也会生成sourcemanp,该项配置直接使用前面的sourcemap
options: {
sourceMap: true
}
}
]
});
// webpack打包后的js是转移的(如es6转程es5),在出错后不好定位,需要把转换后的js代码映射,这样我门
// 查看错误的时候,还是我们编写代码样式,便于定位
config.devtool = "#cheap-module-eval-source-map";
// 开发环境配置
config.devServer = {
port: "8002",
// 设置成 0.0.0.0可以通过 localhost,127.0.0.1,本机ip进行访问
host: "0.0.0.0",
//如果有错直接显示在网页上面
overlay: {
errors: true
},
// // 将server不理解的地址,映射首页
// historyFallback:{
// },
//在启动的时候自动打开浏览器
open: true,
// 只渲染当前组件的效果,不会整个项目重新渲染
hot: true
};
config.plugins.push(
// 热加载需要的插件
new webpack.HotModuleReplacementPlugin(),
// 过滤一些不需要的信息
new webpack.NoEmitOnErrorsPlugin()
);
} else {
//配置入口文件 ,将类库单独打包
config.entry = {
app: path.join(__dirname, "src/index.js"),
// 要单独打包的库文件
vendor: ['vue']
}
//正式环境必须为 chunkhash
config.output.filename = '[name].[chunkhash:8].js'
// 正式环境处理 css样式,单独打包为一个静态文件
config.module.rules.push({
// css 预处理文件
test: /\.styl/,
use: ExtractPlugin.extract({
fallback: "style-loader",
use: [
"css-loader",
"stylus-loader",
{
loader: "postcss-loader",
// stylus-loader会生成sourcemap ,而postcss-loader也会生成sourcemanp,该项配置直接使用前面的sourcemap
options: {
sourceMap: true
}
}
]
})
});
config.plugins.push(
//输出 css文件的名称
//new ExtractPlugin('styles.[contentHash:8].css')
// 这个插件与 webpack存在兼容问题,这个是临时解决方案
new ExtractPlugin('styles.[chunkhash:8].css'),
//单独打包类库文件 webpack存在兼容问题,需要注意版本 ,使用下面optimization方式进行配置
// new webpack.optimize.CommonsChunkPlugin({
// //注意与上面配置name 一致
// name :'vendor'
// })
//将 webpack配置的代码单独打包为一个文件,注意必须在单独打包库文件后面
// new webpack.optimize.commonsChunkPlugin({
// name:"runtime"
// })
)
// https://webpack.js.org/plugins/split-chunks-plugin/
config.optimization={
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
}
}
module.exports = config;webpack区分打包类库代码及hash优化
类库的代码一般比较稳定,希望可以长时缓存在浏览器,避免跟业务代码合并在一起
tips:hash和chunkhash的区别, hash方法打包出来的是项目的hash名称是一样的, chunkhash是单独模块的hash,是不一样的