哪个网站容易做二级域名,网页宣传方案,php开发的大型网站有哪些,营销型网站报价明细两个有用的微前端框架
乾坤 无界
实际的前端开发
模块化#xff08;js的模块化#xff0c;CSS的模块话#xff0c;资源的模块化#xff09;组件化#xff08;复用现有的UI结构、样式、行为#xff09;规范化#xff08;目录结构的划分、编程规范化、接口规范化、文档…两个有用的微前端框架
乾坤 无界
实际的前端开发
模块化js的模块化CSS的模块话资源的模块化组件化复用现有的UI结构、样式、行为规范化目录结构的划分、编程规范化、接口规范化、文档规范化、Git分支管理自动化自动化构建、自动部署、自动化测试
webpack实际应用
指令
- npm init -y 初始化包管理文件package.json
- npm install packageName -S -S明确告诉npm所加载的包进入到dependencies目录下该目录下的配置是开发环境和线上环境都能用到的
- npm install webpack版本号 wbpack-cli版本号 -D 安装webpack-D明确告诉npm所加载的包进入devDependencies目录下该目录下放置只在开发环境能用到的资源- 注意-S是--save的简写-D是--save-dev的简写基本使用
在项目的根目录下创建一个webpack.config.js的webpack配置文件并初始化如下的基础配置 module.exports {mode: development}在package.json的scripts节点下新增的脚本如下 scripts: {dev: webpack}在终端中运行npm run dev命令启动webpack进行项目的打包构建 webpack的基本使用 4.1mode的可选值 mode节点的可选值有两个分别是 development 开发环境不会对打包生成的文件进行代码压缩和性能优化打包速度快适合在开发阶段使用 production 生产环境会对打包生成的文件进行代码压缩和性能优化打包速度很慢仅适合在项目发布阶段使用 4.2 webpack.config.js 文件的作用 webpack.config.js是webpack的配置文件。webpack 在真正开始打包构建之前会先读取这个配置文件从而基于给定的配置对项目进行打包。注意:由于 webpack 是基于 node.is 开发出来的打包工具因此在它的配置文件中支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。 4.3 webpack的默认约定 在webpack4.X和webpack5.X的版本中有如下的默认约定 默认的打包入口文件为src - index.js默认的输出文件路径为dist - main.js注意可以在webpack.config.js中修改打包的默认约定 4.4自定义打包的入口与出口 在webpack.config.js配置文件中通过entry节点指定打包入口。通过output节点指定打包的出口 const path require(path)
module.exports {entry: path.join(__dirname, ../src/index.js), // 打包入口的文件路径output: {path: path.join(__dirname, ./dist), // 输出文件的存放路径filename: bundle.js // 输出文件的名称}
}webpack中的插件 插件的作用 通过安装第三方的插件可以拓展webpack的能力从而让webpack用起来更方便。最常用的webpack插件有以下两个 webpack-dev-server 类似于node.js阶段用到的nodemon工具每当修改了源代码webpack会自动进行项目打包和构建 html-webpack-plugin webpack中的Html插件类似于一个模板引擎插件可以通过此插件自定制index.html页面的内容 2.1 安装webpack-dev-server 运行如下的命令即可在项目中安装这个插件npm install webpack-dev-server版本号 -D 2.2 配置webpack-dev-server 修改package.json-scripts中的dev命令如下 scripts: {dev: webpack serve}再次运行npm run dev命令在浏览器中访问http://localhost:8080/地址查看自动打包效果 注意webpack-dev-server会启动一个实时打包的http服务器 注意 我配置完这些之后访问http://localhost:8080/报错了not get 404我按照下面的步骤解决了一下 我先是输入http://localhost:8080/webpack-dev-server看看能不能看到webpack仪表盘再看http://localhost:8080/bundle.js看看能不能看到打包成功的文件(为了确保万无一失全局搜索一下自己写的代码)发现上面都没问题之后查阅文档说要配置静态文件目录 devServer: {static: {directory: path.join(__dirname, src), // 如果 HTML 在 src/ 目录},
},但是我配置完之后发现我的js代码并没有生效查阅资料说index.html什么默认不会注入打包的bundle.js这个看上去不知道咋理解以为我已经使用
错误类型与解决 Uncaught SyntaxError: Cannot use import statement outside a module SyntaxError语法错误
