webpack基本配置流程

webpack的基本配置
1、新建文件夹 test cd进入

2、npm init 初始化

3、安装webpack cnpm install webpack webpack-cli webpack-dev-server --save-dev

4、为了支持es6安装babel依赖cnpm install babel-loader babel-core babel-preset-es2015 --save-dev

5、新建webpack.config.js内容 :内容如下
const path = require(‘path’); module.exports = { mode: “production”, // “production” | “development” | “none” // Chosen mode tells webpack to use its built-in optimizations accordingly. entry: “./app/app.js”, // string | object | array // 默认为 ‘./src’ // 这里应用程序开始执行 // webpack 开始打包 output: { // webpack 如何输出结果的相关选项 path: path.resolve(__dirname, “dist”), // string // 所有输出文件的目标路径 // 必须是绝对路径（使用 Node.js 的 path 模块） filename: “bundle.js”, // string // 「入口分块(entry chunk)」的文件名模板 publicPath: “/public/”,//webpack-dev-server:虚拟文件夹（内存和硬盘中找不到）内存速度会更快，提升变异速度，保护硬盘 // string // 输出解析文件的目录，url 相对于 HTML 页面 library: “MyLibrary”, // string, // 导出库(exported library)的名称 libraryTarget: “umd”, // 通用模块定义 // 导出库(exported library)的类型 /* 高级输出配置（点击显示） */ }, module:{ rules:[{ test: /.jsx?KaTeX parse error: Expected group after '_' at position 28: …[ path.resolve(_̲_dirname, "app"…’: ‘vue/dist/vue.esm.js’ // 用 webpack 1 时需用 ‘vue/dist/vue.common.js’ } } }

6.npx webpack 运行项目，如果报错重新安装cnpm install babel-loader@7.1.5 --save-dev

7、新建app文件夹，并在文件夹中新建app.js内容配置如下： var [a,b,c] = [1,2,3]; console.log(a,b,c); 执行npx webpack 新建inde.html 引入 在浏览器中打开 修改 运行：node_modules/.bin/webpack-dev-server 在浏览器中打开http:localhost:8080 生成一个本地服务器 webpack-dev-server提供一个本地服务器 根路径:oublic 关闭服务器：ctrl+c 可以简化操作：修改package.js在： “scripts”: { “start:dev”: “webpack-dev-server” }, 运行：npm run start:dev

到这里就基本配置完毕了!!!

8、安装Vue cnpm install vue --save-dev 修改app.js为： // 引入Vue import Vue from “vue”; //初始化Vue new Vue({ el:"#app", data:{ a:1 } }); 在index.html中添加
{{a}}

运行npm run start:dev 无法获取a的值

如若对您有帮助,记得点赞关注