json文件运行配置
"scripts": {
"dev": "node index.js"
},
index.js文件
var opn = require('opn') // 打开浏览器
var path = require('path') // 路径模块
var express = require('express') // express框架
var webpack = require('webpack') //核心模块webpack
var webpackConfig = require('./webpack.config')// 配置文件
var port = webpackConfig.devServer.port
var app = express()
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: false,
heartbeat: 2000
})
app.use(require('connect-history-api-fallback')())
//开启 支持history路由
app.use(devMiddleware) // 服务器webpack插件
app.use(hotMiddleware) // 热加载自动打包
app.use('./static', express.static('./static'))
var uri = 'http://localhost:' + port
var _resolve
var readyPromise = new Promise(resolve => {
_resolve = resolve
})
console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
console.log('> Listening at ' + uri + '\n')
if (process.env.NODE_ENV !== 'testing') {
opn(uri)
}
_resolve()
})
var server = app.listen(port)
module.exports = {
ready: readyPromise,
close: () => {
server.close()
}
}
webpack配置文件
entry: [‘webpack-hot-middleware/client’, ‘./src/index.js’],
const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存
const {
CleanWebpackPlugin} = require('clean-webpack-plugin')
const vueload=require("vue-loader/lib/plugin")
const minicss=require("mini-css-extract-plugin")//webpack4.0以后的打包css文件
const optimizecssassetswebpackplugin=require("optimize-css-assets-webpack-plugin")//压缩如果你使用ui组件库已经压缩的css就别必要了
const webpack = require("webpack")
const clernWebpackPlugin = require('clean-webpack-plugin')
const htmlplugin=new HtmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),//源头文件
filename:"index.html",//生成首页的文件名称
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true
}
})
const css=new minicss({
//输出css独立文件
filename:"./css/[name].css",
chunkFilename:"[name].css"//或者id
})
module.exports={
//webpack基于node构建的
mode: "development",
entry: ['webpack-hot-middleware/client', './src/index.js'],
output: {
filename: 'main.[hash:8].js',//通过热加载输出script文件挂载在目录与index.HTML一样
path: path.resolve(__dirname, 'dist')
},
watch: true,
watchOptions:{
poll:1000,
// aggregateTimeOut: 500,
ignored: /node_modules/
},
//production 提供了约定大于配置 约定打包文件是src/index ->dist/main
plugins:[
htmlplugin,
new vueload() ,
new CleanWebpackPlugin(),
css,
new webpack.HotModuleReplacementPlugin()
// new clernWebpackPlugin('./dist')
],
module: {
//所以第三方模块的配置规则
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude:/node_modules/
},
{
test: /\.scss$/,
// use: [
// 'vue-style-loader',
// 'css-loader',
// 'sass-loader'
// ]
use:[{
loader:minicss.loader}, {
loader: 'css-loader',
options: {
modules: true }
},'sass-loader']
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/] },
exclude:/node_modules/
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000
}
},
// { test:/\.js|\jsx$/,use:[{loader:"babel-loader",options:{cacheDirectory:true}}],exclude:/node_modules/},//一个属性use:"babel-loader"两个是数组
// // { test:/\.css/,use:['style-loader','css-loader']},
{
test:/\.css$/,use:[{
loader:minicss.loader},'css-loader']},
// { test:/\.scss/,use:['style-loader', {loader: "css-loader",
// options: {//这个是react的css模块化
// modules: {
// localIdentName: "[path][name]-[local]-[hash:5]"
// }//import css from '路径' console.log(css)会生成模块
// //这是react的处理办法 vue就是style里面写scoped
// //支持id与class 控制台输出的模块是健对值形式
// }//css scss less一样的配置模块化
// }]},
{
test:/\.(jpg|PNG|png|jpeg)/,use:[{
loader:"url-loader",options:{
outputPath:"images/",
limit:1024,//单位是B 大于这个会打包出来
name:"[name].[ext]"
}}]},
{
test:/.vue$/,use:[{
loader:"vue-loader"}]},
]
},
devtool:"hidden-source-map",//inline把js打包在一个文件里面 hidden分离出来 eval也是分离
optimization:{
//代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
splitChunks:{
chunks:"all"
}
},
resolve: {
// 将 `.ts` 添加为一个可解析的扩展名。
extensions: ['.js','.vue','.ts','.json']
},
devServer: {
port: 8080,
hot: true,
grogress: true,
historyApiFallback: true
//true 表示webpack支持使用history false路由默认是hash
}
}
src/index.js
import Vue from 'vue'
import app from './router.vue'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: function (h) {
return h(app)
}
});