1. 基于 webpack 3.0
2.步骤、说明
2.1 webpack 本地初始化、安装基本包
npm init 》 package.json
npm i webpack@3.10.0 vue@2.5.13 vue-loader@13.6.0 》 安装webpack和vue,使用vue要安装vue-loader
npm i css-loader@0.28.7 vue-template-compiler@2.5.13 》 根据终端WARN提示安装css-loader,因为vue-loader依赖css-loader
2.2 package.json 配置本项目启动快捷键 build （npm run build）及 本项目启动配置优于全局
scripts 脚本对象增加配置属性：
2.3 新建 项目文件 webpack.config.js 文件 处理对应文件及其对应 loader 规则
const path = require('path');
module.exports = {
entry: path.join(__dirname,'src/index.js'),
output:{
filename:'build.js',
path: path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/.vue$/,
loader:'vue-loader'
}
]
}
}
2.3.1 打包多个 js
2.4 打包其他静态资源
npm i style-loader@0.19.1 url-loader@0.6.2 file-loader@1.1.6 》 url-loader file-loader 处理图片 》style-loader 处理成内联 css （往上抛的处理顺序）
npm i stylus-loader@3.0.1 stylus@0.54.5 》 处理 styl 后缀样式表
webpack.config.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /.vue$/,
loader: 'vue-loader'
}, {
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]'
}
}]
}
]
}
}
index.js
import Vue from 'vue' import App from './app.vue' import './assets/images/bg.png' import './assets/styles/test.css' import './assets/styles/footer.styl' const root=document.createElement('div') document.body.appendChild(root); new Vue({ render: h => h(App) }).$mount(root)
2.5 webpack-dev-server
npm i webpack-dev-server@2.9.1 》 搭建 web 服务器 开发环境 （ 热加载之类 ）
npm i cross-env@5.1.3 》根据一个环境变量判断,来判断是开发环境还是正式环境 NODE_ENV就是这个环境变量 解决这种跨平台设置的差异性,我们可以安装cross-env
npm i html-webpack-plugin@2.30.1 》 将我们打包好后的js融入到我们的HTml中去
关键代码
webpack.config.js
const path = require('path');
const webpack = require("webpack")
const HTMLPlugin = require('html-webpack-plugin')
//判断是否为测试环境,在启动脚本时设置的环境变量都是存在于process.env这个对象里面的
const isDev = process.env.NODE_ENV === "development"
const config ={
target:'web',
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /.vue$/,
loader: 'vue-loader'
}, {
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]'
}
}]
}
]
},
plugins:[
new webpack.DefinePlugin({ //主要作用是在此处可以根据isdev配置process.env,一是可以在js代码中可以获取到process.env,
'process.env':{ //二是webpack或则vue等根据process.env如果是development,会给一些特殊的错误提醒等,而这些特殊项在正式环境是不需要的
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin() //引入HTMLPlugin
]
}
if(isDev){
config.devtool = '#cheap-module-eval-source-map'
config.devServer = {
// port: 8000,
// host: '127.0.0.1',
port: 8700,
host: '0.0.0.0',
overlay: {
errors: true,
},
// open: true , //项目启动时,会默认帮你打开浏览器
hot: true //在单页面应用开发中,我们修改了代码后是整个页面都刷新,开启hot后,将只刷新对应的组件
},
config.plugins.push( //添加两个插件用于hot:true的配置
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config
package.json
{ "name": "webpack3.0", "version": "1.0.0", "description": "", "main": "index.js", "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" }, "author": "", "license": "ISC", "dependencies": { "cross-env": "^5.1.3", "css-loader": "^0.28.7", "file-loader": "^1.1.6", "html-webpack-plugin": "^2.30.1", "style-loader": "^0.19.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.1", "url-loader": "^0.6.2", "vue": "^2.5.13", "vue-loader": "^13.6.0", "vue-template-compiler": "^2.5.13", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.1" } }
npm run dev 执行代码 > http://localhost:8700/
2.6 vue 项目实战
3.相关文章