网站分页符怎么做,湖南营销网站建设联系方式,海东营销网站建设,网站兼容手机代码webpack学习-1.起步 1.基础设置2.配置文件的引入3.总结 1.基础设置
首先 webpack是干嘛的呢#xff0c;用官网的一张图 Webpack 是一个现代的静态模块打包工具。它主要用于将前端应用程序中的各种资源#xff08;例如 JavaScript、CSS、图片等#xff09;打包成一个或多个… webpack学习-1.起步 1.基础设置2.配置文件的引入3.总结 1.基础设置
首先 webpack是干嘛的呢用官网的一张图 Webpack 是一个现代的静态模块打包工具。它主要用于将前端应用程序中的各种资源例如 JavaScript、CSS、图片等打包成一个或多个优化的静态文件以便在浏览器中加载和运行。只要功能有模块打包代码转换资源优化代码分割开发调试。 先学起步吧也是跟着官方文档来的也就总结一下吧。
首先创建进入一个目录并初始化 npm然后 在本地安装 webpack接着安装 webpack-cli此工具用于在命令行中运行 webpack mkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 现在创建以下目录结构、文件和内容 project
webpack-demo |- package.json |- package-lock.json |- index.html |- /src |- index.js
根据官网的 创建一个 bundle这句话要记住 执行 npx webpack 会将脚本 src/index.js 作为 入口起点也会生成 dist/main.js 作为 输出。Node 8.2/npm 5.2.0 及以上版本提供的 npx 命令可以运行在最初安装的 webpack 包中的 webpack 二进制文件即 ./node_modules/.bin/webpack 这是在没有webpack的配置文件的情况下默认的会 src/index.js 作为 入口起点也会在生成 dist/main.js 作为 输出刚好作为index.html的script的js引入。
2.配置文件的引入
webpack v4 无须任何配置即可运行然而大多数项目会需要很复杂的设置因此 webpack 仍然支持 配置文件这比在终端中手动输入大量命令更加高效。
const path require(path);module.exports {entry: ./src/index.js,output: {filename: main.js,path: path.resolve(__dirname, dist),},
};通过命令行再次运行配置文件进行构建 npx webpack --config webpack.config.js 这样构建不方便命令行有点多可以在 package.json 文件中添加 npm script 以设置一个快捷方式 {name: webpack-demo,version: 1.0.0,description: ,private: true,scripts: {test: echo \Error: no test specified\ exit 1,build: webpack},keywords: [],author: ,license: ISC,devDependencies: {webpack: ^5.4.0,webpack-cli: ^4.2.0},dependencies: {lodash: ^4.17.20}}重点是scripts里的build配置这样就可以用npm run build进行构建了
3.总结
通过起步学习了解到webpack可以将一些import语法例子中是这个当然还有很多的语法转换成浏览器认识的语法进而使项目运行达到预想结果。简单的工作原理配置文件npm script。
