webpack初步搭建Vue项目
程序员文章站
2022-04-04 15:25:40
对文件进行打包 本地热更新 处理图片资源 url loader依赖file loader 处理css文件 css预处理器 预处理器工具 处理html文件 处理js文件 兼容es6写法 处理vue文件 处理vue中使用jsx文件 处理package.json跨平台传变量问题 webpack配置 单独配 ......
对文件进行打包
1. cnpm i -d webpack webpack-cli
本地热更新
1. cnpm i -d webpack-dev-server
处理图片资源
url-loader依赖file-loader
1. cnpm i -d url-loader file-loader
处理css文件
1. cnpm i -d css-loader style-loader
css预处理器
1. cnpm i -d stylus stylus-loader 2. cnpm i -d postcss-loader
预处理器工具
1. cnpm i -d autoprefixer
处理html文件
1. cnpm i -d html-webpack-plugin
处理js文件
兼容es6写法
1. cnpm i -d babel-core babel-preset-env babel-loader
处理vue文件
1. cnpm i -d vue vue-loader vue-style-loader vue-template-loader
处理vue中使用jsx文件
if using babel 7, use 4.x if using babel 6, use 3.x cnpm i -d babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env
处理package.json跨平台传变量问题
cnpm i -d cross-env
webpack配置
const path = require('path') const vueloaderplugin = require('vue-loader/lib/plugin') const htmlplugin = require('html-webpack-plugin') const webpack = require('webpack') const isdev = process.env.node_env === 'development'; module.exports = { target:"web", mode:isdev ? 'development' : 'production', devtool:"#cheap-module-eval-source-map", devserver:isdev === 'development' ? { port:8080, contentbase:path.join(__dirname,'dist'), host:'0.0.0.0', overlay:{ errors:true }, hot:true } : {}, entry:path.join(__dirname,'src/index.js'), output:{ filename:'bundle.js', path:path.join(__dirname,'dist') }, module:{ rules:[ { test:/\.vue$/, use:{ loader:'vue-loader' } }, { test:/\.jsx$/, use:{ loader:'babel-loader' } }, { test:/\.css$/, use:[ 'style-loader', 'vue-style-loader', 'css-loader' ] }, { test:/\.styl/, use:[ 'style-loader', 'css-loader', 'postcss-loader', 'stylus-loader' ] }, { test:/\.(gif|jpg|jpeg|png|svg)/, use:{ loader:'url-loader', options:{ limit:1024, name:'[name].[ext]' } } } ] }, plugins: [ new vueloaderplugin(), new htmlplugin({ filename:'index.html', template:'index.html' }), new webpack.namedmodulesplugin(), new webpack.hotmodulereplacementplugin() ] }
单独配置jsx,postcss
//.babelrc { "presets":[ "env" ], "plugins":[ "transform-vue-jsx" ] } //postcss.config.js const autoprefixer = require('autoprefixer') module.exports = { plugins:[ autoprefixer() ] }
上一篇: 入门—最简单的树(使用json数据)