标签：version author oba join output babel plugin 选项 大小
入口(entry)：指示webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
输出(output)：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
加载器(loader)：loader 让 webpack 能够去处理那些非 JavaScript 文件，比如css，图片
插件(plugins)：插件可以用于执行范围更广的任务，比如打包优化和压缩
npm i webpack -D
根目录下面新建src目录，在该目录下面创建自己的js文件
然后运行npx webpack 将创建出来的js文件打包，(会生成一个dist目录，默认打包出来的文件是main.js)此时会有警告，意思是mode选项没有设置。mode模式有两种，一种是deveopment，一种是production
添加mode选项，运行命令npx webpack --mode development
修改代码，自动重新打包，运行命令
安装`npm i webpack-dev-server -D
let path = require(‘path‘) module.exports = { // 入口文件配置 entry: "./src/index.js", // 出口文件配置项 output: { // 输出的路径，必须是绝对路径 path: path.join(__dirname, ‘dist‘), // 输出文件名字 filename: "bundle.js", // 2. 静态资源打包出来在服务器上运行时的访问路径，可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件 publicPath: ‘/dist‘ }, mode: ‘development‘ }
运行：npx webpack-dev-server
运行：npx webpack-dev-server --inline --hot --open --port 8090 --hot热重载
配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"
配置webpack.config.js
运行
let path = require(‘path‘) let HtmlWebpackPlugin = require(‘html-webpack-plugin‘) module.exports = { // entry 属性表示入口文件路径 entry: ‘./src/index.js‘, // output表示输出配置 output: { // path属性表示输出路径 该路径只能为一个绝对路径 path: path.join(__dirname, ‘dist‘), // filename属性表示给输出的文件取名 filename: ‘bundle.js‘, //publicPath 表示静态资源在服务器的存放路径 // publicPath: ‘/dist‘ }, // module属性用来处理文件模块 module: { // rules 主要用来表示各种文件使用哪种loader加载器 rules: [ { // test表示处理的文件类型，它后面跟一个正则 test: /\.css$/, // use表示使用哪些loader use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }, { test: /\.less$/, use: [{ loader: ‘style-loader‘ }, { loader: ‘css-loader‘ }, { loader: ‘less-loader‘ }] }, { test: /\.scss$/, use: [{ loader: ‘style-loader‘ }, { loader: ‘css-loader‘ }, { loader: ‘sass-loader‘ }] }, { test: /\.(png|jpg|gif|eot|svg|ttf|woff)/, use: [{ loader: ‘url-loader‘, // options表示配置项 options: { // limit属性表示如果图片大小大于limit参数的值，那就用路径的形式展示；如果图片小于limit参数的值，那就用base64格式展示。（单位是b） limit: 40000 } }] }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: ‘babel-loader‘, // options: { // presets: [‘@babel/preset-env‘] // } } } ] }, // 插件 plugins:[ new HtmlWebpackPlugin({ // template 表示最后生成的HTML页面以哪个文件为模板 template:‘template.html‘, // filename表示最后根据模板页面生成的新的HTML页面 filename:‘index.html‘ }) ], // 指定mode为开发模式 mode:‘development‘ }
对应的.babelrc
{ "presets": ["@babel/preset-env"] }
{ "name": "test-webpack", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "webpack-dev-server --inline --hot --open --port 8090" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.1.6", "@babel/preset-env": "^7.1.6", "babel-loader": "^8.0.4", "css-loader": "^1.0.1", "file-loader": "^2.0.0", "html-webpack-plugin": "^3.2.0", "less": "^3.8.1", "less-loader": "^4.1.0", "node-sass": "^4.10.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "url-loader": "^1.1.2", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.5.17", "webpack": "^4.26.0", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" }, "dependencies": { "vue": "^2.5.17", "vue-router": "^3.0.2" }, "description": "" }
标签：version author oba join output babel plugin 选项 大小
原文地址：https://www.cnblogs.com/ressiry/p/10502754.html
