webpack---初级使用

webpack基本使用

下载：npm install webpack@3.6.0 -S-dev 开发环境dev时使用webpack，项目上线后不需要webpack 3.6.0版本常用且较为简单局部webpack与全局webpack 全局webpack：cmd终端直接执行webpack或者webpack pathA pathB 局部webpack：配置package.json文件(npm管理文件)内的script脚本，执行npm run build

“scripts”: { “test”: “echo “Error: no test specified” && exit 1”, “build”:“webpack” } package.json中的script脚本在执行时 首先寻找本地的node_module/.bin路径中对应的命令 其次再去找全局的环境变量中寻找

webpack打包

JS文件打包 方案一 执行webpack 原文件路径 打包后文件路径,例子------webpack ‘./src/index.js’ ‘./dist/bundle/js’ 方案二 编译webpack.config.js，执行webpack let path = require('path') module.exports = { entry:{ main:'./src/js/index.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname,'dist'), } } 样式文件打包（参考文档） loader作用style-loader将模块的导出作为样式添加到 DOM 中css-loader解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码less-loader加载和转译 LESS 文件sass-loader加载和转译 SASS/SCSS 文件postcss-loader使用 PostCSS 加载和转译 CSS/SSS 文件stylus-loader加载和转译 Stylus 文件 处理less文件例子 // webpack.config.js module.exports = { ... module: { rules: [{ test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader", options: { strictMath: true, noIeCompat: true } }] }] } }; 图片文件打包 loader作用raw-loader加载文件原始内容（utf-8）针对txtval-loader将代码作为模块执行，并将 exports 转为 JS 代码url-loader像 file loader 一样工作，但如果文件小于限制，可以返回 data URLfile-loader将文件发送到输出文件夹，并返回（相对）URL 注意：url-loader可以看作进阶版的file-loader（两个loader使用其一即可） 处理txt文本、png图片例子 // webpack.config.js module.exports = { ... module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }, { test: /\.(png|jpg|gif)$/, use: [{ // url-loader如果高于limit则如file-loader生成文件 // 低于limit则不生成文件 // 即url-loader跟file-loader存在一定功能冲突，二者选其一使用 loader: 'url-loader', options: { limit: 8192, name:'[name].[hash:8].[ext]', outputPath:'img/', // 输出目录 publicPath:'dist/img' // 公布目录（最后需要改回img/） } }] }] }] } }; 转换编译：ES6→ES5 // 下载：npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env -S-D module.exports = { ... module: { rules: [{ test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }] } }; Vue文件打包 // 下载：npm install vue-loader vue-template-compiler -S-D // vue15+版本还需要加载插件 const VueLoaderPlugin = require('./node_modules/vue-loader/lib/plugin.js') module.exports = { ... module: { rules: [{ test: /\.vue$/, use: [{ loader: 'vue-loader', }] }] }, plugins:[ new VueLoaderPlugin() ] }; 处理js文件中的Vue代码需配置以下操作（令Vue指向runtime-complier模式而不是runtime-only模式) module.exports = { resolve:{ alias:{ '$vue':'vue/dist/vue.esm.js' // 当使用import..from 'Vue'时指向runtime-complier文件而不是默认的runtime-only文件 } } // runtime-complier:能够进行模板编译，处理template // runtime-only:缺少模板编译功能 }

webpack插件

plugin

定义：对webpack现有功能的扩展 作用：优化打包跟文件压缩html-webpack-plugin 作用：1）打包自动生成index.html文件（可以指定模板）；2）自动通过script标签将打包的js文件插入body中 //npm install --save-dev html-webpack-plugin@3.2.0(下载最新版本可能出错) const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { ... plugins: [new HtmlWebpackPlugin({ template:'index.html' // 指定模板 })] }; webpak.BannerPlugin 作用：给生成的js文件添加版权说明（webpack自带） const webpack = require('webpack') module.exports = { ... plugins: [new webpak.BannerPlugin('版权说明')] };

webpack本地服务器

// npm install webpack-dev-server --save-dev module.exports = { ... devServer:{ contentBase:'./dist', inline:true } // 执行：webpack-dev-server --open打开服务器

配置文件分离

// npm install webpack-marge --save-dev const {smart} = require('webpack-marge') const main = require('./prod.config,js') module.exports = smart(main,{ ... XXX devServer:{ contentBase:'./dist', inline:true } }) // 作用：结合两个config.js文件

Vue-cli安装

前提 1）node 2）npm 3) webpack安装：npm install -g @vue/cli创建项目（参考） // 基于交互式命令行的方式创建新版vue项目 vue create my-project // 可能出现command failed: npm install --loglevel error问题 // 解决方案 1）npm cache clean --force；2）在~/.vuerc文件中将”useTaobaoRegistry”: true设置为false。 // 基于图形化界面的方式创建新版vue项目 vue ui // 基于2.x的旧模式创建旧版vue项目 npm install -g @vue/cli-init vue init webpack my project