搜索 - 腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

来自专栏守候书阁
vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别
接下来我只针对webpack.config.js这个配置文件说明，因为我做项目的时候，改动的基本就是这里，项目的文件虽然也有写法上的改动，但是那个改动相信不会难到大家，如果真的不知如何下手，我往后可能会再写文章单文件应用和多文件应用上，webpack.config.js是大同小异的，区别就讨论到这里了。如果文章觉得那里写得不好或者写错了，欢迎指出。同时也希望，这篇文章能帮到大家！
1.5K30发布于 2018-08-22
来自专栏淡定的博客
Webpack基本使用
/dist 基本使用把src的代码编译到dist目录中 project handle |- package.json |- webpack.config.js |- index.html |- /src /dist/bundle.js"></script> </body> </html> .npmrc registry=https://registry.npm.taobao.org webpack.config.js 修改配置文件： webpack.config.js devtool: 'inline-source-map', mode: 'none' ? /css/main.css' 修改配置文件 webpack.config.js module: { rules: [ // 加载css { // 找到css文件() /image/chrome.png'); 修改配置文件 webpack.config.js rules: [ { test: /\.(png|jpe?
87130发布于 2018-12-27
来自专栏淡定的博客
Webpack基本使用
/dist 基本使用把src的代码编译到dist目录中 project handle |- package.json |- webpack.config.js |- index.html |- /src 修改配置文件： webpack.config.js devtool: 'inline-source-map', mode: 'none' ? /css/main.css' 修改配置文件 webpack.config.js module: { rules: [ // 加载css { // 找到css文件() /image/chrome.png'); 修改配置文件 webpack.config.js rules: [ { test: /\.(png|jpe? ) 配置webpack.config.js plugins: [ new HtmlWebpackPlugin({ title: '使用HtmlWebpackPlugin'
63020发布于 2018-09-06
来自专栏前端自习课
【Webpack】1083- 分享15个Webpack实用的插件！！！
配置 main.js import Vue from "vue" webpack.config.js module.exports = { entry: { main: ". /news") news.js import Vue from "vue" console.log(Vue) webpack.config.js module.exports = { mode 安装无需安装，webpack内置配置 webpack.config.js const Webpack = require("webpack") module.exports = { plugins 安装无需安装，webpack内置配置 webpack.config.js const Webpack = require("webpack") module.exports = { plugins 安装无需安装，webpack内置配置 webpack.config.js const Webpack = require("webpack") module.exports = { plugins
72720发布于 2021-10-08
来自专栏前端自习课
【Webpack】319- Webpack4 入门手册（共 18 章）（上）
1. webpack 模块介绍这里介绍的模块（module）是指 webpack.config.js 文件中的 module 配置，它决定了如何处理项目中的不同类型模块。 " }, 这里的 -c webpack.config.js 中， -c 后面跟着的是 webpack 配置文件的文件名，默认可以不写。 // webpack.config.js rules: [ { test: /\. = require('uglifyjs-webpack-plugin'); 使用插件： // webpack.config.js // ... 添加 hash 值直接在 webpack.config.js 中，为需要添加 hash 值的文件名添加 [hash] 就可以： // webpack.config.js module.exports
2.1K40发布于 2019-08-20
来自专栏start
webpack的进阶使用
示例代码如下： // webpack.config.js module.exports = { mode: 'production', // ... } 2. 以下是一个使用 thread-loader 的示例： // webpack.config.js module.exports = { // ... 以下是一个使用文件系统缓存的示例： // webpack.config.js module.exports = { // ... /module'); // webpack.config.js module.exports = { // ... output: { filename: '[name]. 以下是一个使用持久化缓存的示例： // webpack.config.js module.exports = { // ...
30910编辑于 2024-03-20
来自专栏胡哥有话说
从零开始配置webpack(基于webpack 4 和 babel 7版本)
最简webpack配置首先初始化npm和安装webpack的依赖: npm init -ynpm install --save-dev webpack webpack-cli 配置 webpack.config.js 安装依赖: npm install --save-dev html-webpack-plugin 在 webpack.config.js 增加 plugins 配置: const HtmlWebpackPlugin 安装依赖: npm install --save-dev style-loader css-loader 在 webpack.config.js 中增加 loader 的配置。安装对应的依赖: npm install --save-dev less less-loadernpm install --save-dev node-sass sass-loader 在 webpack.config.js 完整webpack.config.js和package.json文件 webpack.config.js文件: const path = require('path');const htmlWebpackPlugin
91030发布于 2019-09-12
来自专栏云瓣
webpack配置React开发环境(上)
Webpack 使用一个名为 webpack.config.js 的配置文件。 // webpack.config.js module.exports = { entry: '. // webpack.config.js module: { loaders:[ { test: /\.js[x]? /app.css'); // webpack.config.js module.exports = { entry: '. （2）修改webpack.config.js文件(demo15) 添加新webpack.HotModuleReplacementPlugin() 的插件添加webpack/hot/dev-server http://localhost:8080 到输入字段 // webpack.config.js var webpack = require('webpack'); var path = require
2K130发布于 2018-05-02
来自专栏White feathe 的博客
针对 webpack + es6 + react 安装使用及其遇到的问题！
安装使用 ---- 使用node npm进行安装，首先，我先附上webpack.config.js的代码，再进一步使用： webpack.config.js //webpack.config.js var webpack.optimize.OccurenceOrderPlugin(), new ExtractTextPlugin("style.css") ], } 以上就是我的webpack.config.js 安装命令： ---- 接下来就根据webpack.config.js的配置进行安装 * 这是实现webpack + es6 + react 所有安装命令： //首先安装 webpack 跟 react reactDOM 插件 npm install --save webpack react react-dom //其次，继续安装webpack.config.js所需要的配置 npm install babel-preset-es2015 babel-preset-react ---- 问题2：当你使用ES6的 import 引用css 的时候，例如：在运行 webpack 的时候，报错：你可能会怀疑，是webpack.config.js
54520编辑于 2021-12-08
来自专栏java开发的那点事
从零开始学VUE之Webpack(参数配置化)
webpack的配置 webpack.config.js 上面执行的webpack命令很长,那么有没有什么简化的方式呢,有,那就是配置文件,默认名称为webpack.config.js 拷贝webpack 起步中的目录结构及其文件和内容,从新命名一个文件夹,并在其中新建webpack.config.js ? 应为index.html,main.js,test.js的内容一样的,我就不粘代码了 webpack.config.js // 需要从node依赖中引入需要添加依赖环境 const path = require "name": "simpleconfig", // 项目名称 "version": "1.0.0", // 版本 "description": "", // 描述 "main": "webpack.config.js exit 1" }, // 创建人 "author": "", // 是不是开源~ "license": "ISC" } 现在可以直接运行 webpack,他会找默认的配置文件webpack.config.js
69450发布于 2021-06-07
来自专栏前端技术江湖
搞清楚怎样基于 Webpack5 从 0 搭建 React开发环境-超详细
save-dev 创建以下目录结构、文件和内容： project tristana |- package.json |- /dist |- index.html |- /script |- webpack.config.js /src/index.js"></script>
</body> </html> script/webpack.config.js "scripts": { "build": "webpack --mode=development --config script/webpack.config.js" }, } "scripts": { "start": "webpack serve --mode=development --config script/webpack.config.js" }, // ... } 清理 dist $ npm install clean-webpack-plugin --save-dev script/webpack.config.js const
2.8K20发布于 2021-04-21
来自专栏站长的编程笔记
webpack 构建脚手架
/dist 3. webpack.config.js 在项目根目录下新建 webpack.config.js 文件，文件内容如下所示 const path = require('path');module.exports 解决方案: 修改 webpack.config.js , 在 plugins 中引入 VueLoaderPlugin const VueLoaderPlugin = require('vue-loader alias: { 'vue$': 'vue/dist/vue.esm.js' } }} import 导入 vue 文件，想要省略 .vue 需要在 webpack.config.js 在 webpack.config.js 中的 plugins 中配置插件 8. 添加版权的插件修改 webpack.config.js 配置文件: 这个插件是 webpack 自带的，不需要另外安装 npm 包, 打包生成的 js 文件头部会有版权信息 const webpack
62720编辑于 2022-12-28
来自专栏岳泽以博客
前端工程化与webpack
文件的作用 webpack.config.js是webpack的配置文件，webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。 webpack的默认约定在webpack中有如下的默认约定：默认的打包入口文件为 src -> index.js 默认的输出文件路径为 dist -> main.js 注意：可以在 webpack.config.js 中修改打包的默认约定自定义打包的入口和出口在webpack.config.js配置文件中，通过entry节点指定打包的入口。注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项把js文件统一到js目录中在 webpack.config.js 配置文件的 output 解决默认Source Map的问题开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致： module.exports = {
91220编辑于 2022-10-26
来自专栏多选参数
vue 学习笔记第四弹 - Webpack
使用webpack配置文件简化打包命令在项目根目录中创建webpack.config.js 在运行webpack命令时，webpack需要指定入口文件和输出文件的路径，因此，我们还要在webpack.config.js 方式2：修改webpack.config.js文件，新增devServer节点如下： devServer:{ hot:true, open:true, 使用webpack打包css文件运行 npm install style-loader css-loader --save-dev 修改webpack.config.js这个配置文件： module 使用webpack打包less文件运行命令 npm i less-loader less -D 修改webpack.config.js配置文件，如下： { test: /\.less$/, use 使用webpack打包sass文件运行 npm install sass-loader node-sass --save-dev 在webpack.config.js文件中添加处理sass文件的
1.2K20发布于 2020-04-07
来自专栏Web大前端
Webpack模块联邦：微前端架构的新选择
容器应用配置在容器应用的webpack.config.js中，使用ModuleFederationPlugin来声明远程微应用的来源。远程应用配置在每个远程应用的webpack.config.js中，同样使用ModuleFederationPlugin，但这次是来暴露自己的模块。 ", // ...}创建webpack.config.js，配置Module Federation Plugin：// webpack.config.js (Container App)const HtmlWebpackPlugin 中配置Module Federation Plugin以暴露组件：// webpack.config.js (Remote App)const ModuleFederationPlugin = require // webpack.config.js (Remote App for Services)new ModuleFederationPlugin({ name: 'services', filename
1.6K00编辑于 2024-06-07
来自专栏sringboot
npm 及vue，router，webpack安装快速起步
webpack.config.js配置文件中就是要指定上面说的四个核心概念，入口、出口、加载器、插件。将index.html 中的js代码全部放到main.js里去，主要是路由。 /src/main.js', //指定打包的入口文件 } 编写webpack.config.js，添加出口配置： module.exports={ entry:'. /src/main.js', //指定打包的入口文件 output:{ // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径 /css/main.css’ 在webpack.config.js添加加载器 module.exports = { entry: '. 1）安装插件：npm install --save-dev html-webpack-plugin 需要在webpack.config.js中添加插件： const HtmlWebpackPlugin
2K30发布于 2019-11-01
来自专栏前端开发面试指南
Webpack最佳实践
，于是在项目根目录下新建一个名为 webpack.config.js 的文件，在配置文件里写最简单的单页面配置： let path = require("path"); module.exports 项目目录结构大致如下 ├─package.json ├─webpack.config.js ├─src | ├─js | | └index.js ├─dist html 文件打包由于 webpack 只认识 js，因此需通过 html-webpack-plugin 插件打包 html 文件 npm i html-webpack-plugin -D 安装后在 webpack.config.js 配置文件中项目目录结构大致如下 ├─.eslintrc.json ├─package-lock.json ├─package.json ├─postcss.config.js ├─webpack.config.js ，于是在项目根目录下新建一个名为 webpack.config.js 的文件，在配置文件里写最简单的单页面配置： let path = require("path"); module.exports
3.8K20编辑于 2022-10-17
来自专栏小白维基
webpack 4 入门
站在我的角度上，读完这篇文章并不能让你精通 webpack 但是理解 webpack 中的重要概念，自己编写一个 webpack.config.js 配置文件还是可以的。入口(entry) 单入口及其简写 // webpack.config.js module.exports = { entry: { main: '. 分离应用程序主体和第三方库 // webpack.config.js module.exports = { entry: { app: '. 多页面应用程序 // webpack.config.js module.exports = { entry: { pageOne: '. 用法在配置文件中设置 // webpack.config.js module.exports = { ...
1.1K20编辑于 2022-04-02
来自专栏软件工程
plugin
三 plugin的使用过程：步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装) 步骤二：在webpack.config.js中的plugins中配置插件。按照下面的方式来修改webpack.config.js的文件：重新打包程序：查看bundle.js文件的头部，看到如下信息五打包html的plugin 目前，我们的index.html文件是存放在项目的根目录下的 body中安装HtmlWebpackPlugin插件安装HtmlWebpackPlugin插件 npm install html-webpack-plugin --save-dev 使用插件，修改webpack.config.js uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev 修改webpack.config.js /dist - port：端口号 - inline：页面实时刷新 **- historyApiFallback：在SPA页面中，依赖HTML5的history模式 webpack.config.js
97810编辑于 2021-12-23
来自专栏前端自习课
【Cute-Webpack】Webpack4 入门手册（共 18 章）
" }, 这里的 -c webpack.config.js 中，-c 后面跟着的是 webpack 配置文件的文件名，默认可以不写。 // webpack.config.js rules: [ { test: /\. = require('uglifyjs-webpack-plugin'); 使用插件： // webpack.config.js // ... 添加 hash 值直接在 webpack.config.js 中，为需要添加 hash 值的文件名添加 [hash] 就可以： // webpack.config.js module.exports // webpack.config.js module: { { test: /\.
2.7K31发布于 2019-08-15

第 2 页第 3 页第 4 页第 5 页第 6 页第 7 页第 8 页第 9 页第 10 页第 11 页

点击加载更多