Javascript - Vue - 在vscode里使用webpack - JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

cnpm（node package manager）和webpack模块

npm是运行在node.js环境下的包管理工具，使用npm可以很快速的安装前端文件里需要依赖的那些项目文件，比如js、css文件等。首先需要通过npm命令在根目录创建一个packg.json配置文件，这个文件定义了你的项目所需要的各种模块，以及项目的名称、版本、许可证等元数据、以json格式配置项目所需的运行和开发环境。cnpm是npm的淘宝镜像，cnpm的指令与npm是完全一样的，把npm改为cnpm即可。

安装packg.json配置文件

cnpm init -y //在根目录安装packg.json，y表示yes，将略过所有问答，全部采用默认配置。安装成功项目根目录会出现package.json

安装webpack

webpack的作用有两个

1.可以可以将js、css等文件模块打包，会自动分析你的项目结构，找到这些模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏

览器使用。比如js文件并不能引用其他js文件，除非使用ES6的语法import，这种语法现在很多浏览器并不支持，webpack可以对其转换打包成一个可以被浏览器解析的文件。

2.一个html页面上的link、javascript和img等标签总是会默认发起ajax请求向服务器索要html依赖的各种程序文件和图片、字体图标，这会造成页面加载速度不够理想。使用webpack后，由webpack统一管理这些耗时的每次请求，你不需要在每个html页面上引入那些繁多的程序文件、图片和字体图标，只需要引入同一个文件（装载了js、css等的引用）就可以解决所有引入的问题，这节约了页面加载的耗时。

3.打开命令行工具，无论是在何处打开命令行工具的，你只需要输入安装webpack的命令即可把webpack安装到全局（C:\Users\Andminster\AppData\Roaming\npm目录下）

//先全局安装webpack CLI
cnpm i webpack-cli -g //全局安装表示安装到C:\Users\Andminster\AppData\Roaming\npm\node_modules目录下
cnpm i webpack -g
//卸载全局的webpack
cnpm uninstall -g webpack //可以用@指定版本号 ,如：cnpm uninstall -g webpack@3

package.json

在你的项目根目录创建package.json文件。这个文件里就是你的项目所需要的各种模块，它配置项目的开发环境。.json的文件里不能写注释，不能使用单引号。

{
    "name": "vue",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    //简称dep，在运行环境下会用到的配置
    "dependencies": {
        "jquery": "^3.4.1", //运行程序依赖于jquery，所以下载jquery时使用的是cnpm i jquery -S，S就是保存到运行环境
        "webpack-cli": "^3.3.2"
    },
    //简称dev，在生产环境下要用到的配置
    "devDependencies": {
        "webpack": "^4.31.0", //webpack等打包工具只是用来打包的时候用，运行发生在打包之后，所以打包工具放在生产环境里

//cnpm i webpack -D ，D就是保存到生产环境里。如果不写-S或-D则默认为-D
"webpack-dev-server": "^3.3.1"
}
}

指令的四种模式

cnpm i xxxmodule 安装到本地node_modules目录（即你vue项目目录，不是全局的C:\Users\Andminster\AppData\Roaming\npm\node_modules目录）
cnpm i xxxmodule - D 安装到本地目录后注册到package.json的devDependencies（dev）生产环境中，生产环境的程序是用来编译打包的
cnpm i xxxmodule - S 安装到本地目录后注册到package.json的dependencies(dep)运行环境中，运行环境是用来支持运行时的程序的
cnpm i xxxmodule -g global（全局安装），安装到C:\Users\Andminster\AppData\Roaming\npm，而不是安装到你的项目目录

webpack打包指令

//将入口的main.js包转换为浏览器可识别的出口bundle.js包
webpack .\src\main.js .\dist\bundle.js
新版命令：webpack .\src\main.js -o .\dist\bundle.js

webpack手动打包

在vscode中，创建如下目录和文件

打开终端输入cnpm指令

1.cnpm init -y 安装packge.json

2.cnpm i webpack-cli -g 安装全局的webpack CLI

3.cnpm i webpack -g 安装全局的webpack

4.接下来在main.js中输入一段测试代码，打开浏览器测试效果

//在main.js中通过ES6的语法引入jquery包，浏览器不识别ES6的语法格式，所以需要用webpack对此文件进行转换，转换结果在dist/bundle.js里

import $ from "jquery"
$(function() {
alert("hello");
});

//使用webpack打包main.js
webpack .\src\main.js .\dist\bundle.js，如果你用的最新版本：webpack .\src\main.js -o .\dist\bundle.js

//在index.html中直接引入bundle.js即可
<script src="../dist/bundle.js"></script>

webpack.config.js

如不喜欢每次转换都提供入口和出口文件路径，可以考虑在项目根目录创建一个webpack.config.js文件，将入口和出口路径配置在该文件中。这样，下次打包时只需要输入webpack即可。

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"/src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"/dist"),
        filename:"bundle.js"
    }
}

webpack-dev-server模块（自动打包）

在熟悉了webpack安装及其使用方式后，现在你可以完全忽略以上的打包方法。以下介绍的方法是终极绝招，请把上面的方法忘掉，自动打包方法可以自动监视你对程序的修改且可以将改动即时反应在浏览器上。也即，你不需要手动写转换打包的指令，连webpack指令也不需要写。具体操作如下

1.cnpm init -y 安装packge.json

2.cnpm i webpack-cli -g 安装全局的webpack CLI

3.cnpm i webpack -g 安装全局的webpack

4.cnpm i webpack-cli -D 安装本地（当前项目）的webpack CLI到生产环境

5.cnpm i webpack -D 安装本地（当前项目）的webpack到生产环境

6. cnpm i webpack-dev-server -D 安装本地的webpack-dev-server到生产环境

7.在package.json文件中的scripts属性中添加一条

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack-cli": "^3.3.2"
  },
  "devDependencies": {
    "webpack": "^4.31.0",
    "webpack-dev-server": "^3.3.1"
  }
}

8.在当前项目的根目录创建webpack.config.js，添加以下代码

9.在index.html中引入还未打包的bundle.js，这个文件经过webpack-dev-server自动处理后会生成到内存中，而不再是dist目录

10.执行cnpm run dev（终止cnpm run dev：在命令窗口按ctrl+c），输出以下信息

在浏览器输入http://localhost:8080打开网站点击src目录下的index.html文件查看效果。现在你对项目的js文件改动后，webpack-dev-server会立即作出响应并反映在浏览器上。

托管站点根目录

有两种方式可以托管站点根目录，第一种是通过在package.json的scripts中为dev指定参数来设置托管的根目录，被托管的目录会被当做站点根目录：

"dev": "webpack-dev-server --open"

"dev": "webpack-dev-server --open --port 3000" //自定义端口号

"dev": "webpack-dev-server --open --contentBase src" //自定义托管的站点根目录，这会导致cnpm run dev时自动打开托管目录下默认的index.html

"dev": "webpack-dev-server --open --hot" //热重载，每次改动时不会重新生成一个bundle.js，而是将局部修改的代码反映在已经生成过的bundle.js中，这样做会使当你改动js代码后浏览器立即刷新（刷新按钮有反映）才会呈现改动后的结果，使用hot时只有css不会刷新页面

第二种方式是通过在webpack.config.js的devServer中指定参数来设置托管的根目录，被托管的目录会被当做站点根目录

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{
        open:true,
        hot:true,
        port:3000,
        contentBase:"src" //托管的站点根目录设为src而不再是项目根目录（本例中项目根目录是vue，src在vue下面）
    }
}

引用node_module目录下的程序包

不管你托管的目录是vue（本页面例子中的根目录）还是托管的vue下面的src目录，在引用通过cnpm指令安装的程序包（jquery、bootstrap等文件）时，jquery、bootstrap本身是在node-module目录，如果你的站点根目录是src，也不用担心无法引入与src同级别的node-module目录下的文件。也即不管托管哪个目录，都是使用以下方式引入node-module目录下的包，都会去node-module去找，不用手动写/node-module/bootstrap……

import $ from "jquery" //node-module目录的文件固定这样引用
import "bootstrap/dist/css/bootstrap.css" //node-module目录的文件固定这样引用

css打包

webpack默认值支持js文件的打包，要打包css需要安装专门处理css的loader模块

1.cnpm i style-loader -D 本地安装style-loader模块

2.cnpm i css-loader -D 本地安装css-loader模块

3.在webpack.config.js中注册模块

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{
        open:true,
        hot:true,
        port:3000,
        contentBase:"src"
    },
    //配置第三方模块的加载器
    module:{
        rules:[
            {test: /\.css$/,use:['style-loader','css-loader'] } //以css结尾的文件用这俩模块进行处理

//当webpack发现使用inport引入css文件时，它会到配置文件中去查找module-rules里注册的处理程序

//webpack从右向左调用，先调用css-loader再调用style-loader，数组内的项顺序不能改动。

]
}
}

4.在src目录创建css目录，在css目录创建index.css

#box{
    font-size:150px;
    color:red;
    font-weight:bold;
}

5.在src目录的main.js文件中添加以下引入css文件的代码

import $ from "jquery" //jquery安装在本地
import "./css/index.css" //其中./表示当前目录，不能直接写css/index.css，否则报错
$(function() {
alert("webpack");
});

6.在src目录的index.html中添加如下代码

<div id="box">webpack</div>

最后运行cnpm run dev看效果

处理css文件中的url

#box3{
background: url('/img/1.PNG') ;
height:200px;
}

webpack不能处理url地址，这些url地址指向了图片、字体等。这需要安装url-loader来处理，而url-loader又依赖于file-loader

1.cnpm i file-loader -D

2.cnpm i url-loader -D

3. 注意你的webpack托管的是哪一个目录，现在假设你的图片路径为：vue/src/img/1.png。那么如果你的托管的根目录是你的项目根目录vue，则你在css文件中的url为：/src/img/1.png。如果你把src设为站点根目录，比如你把在webpack.config.js文件中的devServer属性的contentBase设src为托管目录，而你的项目根目录本来是vue，那么你在css文件中设置的url为：img/1.png

在webpack.config.js注册url-loader

module: {
    rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        { test: /\.(png | jpg | gif | ttf | jpeg)$/, use: 'url-loader' }
    ]
}

url-loader默认不会把图片生成为base64的编码，但base64编码有利于网络传输，一般情况下应该将小图片转换为base64，大图不适用。可通过配置module的rules来实现自动识别小图并转换

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader?limit=2742' } <2742字节会被转换，经测试无效，原因不明

处理字体图标

比如bootstrap、阿里的iconfont等就有很多字体图标，需要设置过滤规则，用url-loader进行处理

{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },

打包less

与css是一样的设置方式，先在src-css目录创建index.less文件

#box2{
    p{
        font-size:50px;
        background: "#000";
        color:red;
    }
}

在main.js引入less

import "./css/index.less"

在webpack.config.js注册less-loader

//配置第三方模块的加载器
module:{
    rules:[
        {test: /\.css$/,use:['style-loader','css-loader'] },
        {test: /\.less$/,use:['style-loader','css-loader','less-loader']} //以less结尾的文件用这两模块进行处理
    ]
}

cnpm i less -D 本地安装less，less-loader模块依赖于less模块

cnpm i less-loader -D 本地安装less-loader模块

打包sass

第一种方法

npm i -global node-gyp
npm i -global -production windows-build-tools
cnpm i node-sass -D
cnpm i sass-loader -D

其中node-gyp和production windows-build-tools需要用管理员身份运行powershell，由于这两个工具包都是全局安装，所以随便在哪个位置打开powershell都可以，使用npm安装这两个工具，安装完成后，再shift加右键项目目录打开powershell安装node-sass和sass-loader。如果之前没有安装gyp和windows构建工具导致失败，一定要先卸载sass相关包，再按本方法重新安装。

第二种方法（没试过，不确定可行与否）

npm i --save node-sass --registry=https: //registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
npm sass-loader -d

配置第三方模块的加载器

module:{
    rules:[
        {test: /\.scss$/,use:['style-loader','css-loader','sass-loader']}
    ]
}

全局引入scss（vue-cil + webpack适用）

如果你不希望在.vue组件文件中导入scss（因为每一个组件文件可能都需要用到某个全局的scss文件，这样导入会降低效率，而且组件文件也有深度层级，这样每个组件文件都导入某个全局的scss文件就得琢磨路径问题，超麻烦。但如果你不把某个全局的scss文件导入到当前.vue组件文件中，则无法使用全局scss文件中的变量）。这个问题靠安装sass-resources-loader来解决。注意以下各种支持sass的包需要同时保存到生产环境和运行环境

cnpm i node-sass -S -D
cnpm i sass-loader -S -D
cnpm i style-loader -S -D

cnpm i sass-resources-loader -S -D

打开build/webpack.base.conf.js，添加scss处理程序（loader）

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},

打开build/utils.js，找到scss一行

替换为

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders( 'sass' ).concat(
    {
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve( __dirname, '../src/assets/css/global.scss' )
      }
    }
  ),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

resources指定了你的全局scss的路径：css/global.scss，你需要在../src/assets目录中创建一个css目录，在css目录创建一个global.scss文件作为全局scss文件

然后在global.scss中定义一个变量

$bgcolor:#ff6a00;

现在你可以在任何一个.vue组件文件中的style标签里加入lang="scss"，接着就可以使用全局变量了。

h1, h2 {

font-weight: normal;

background:$bgcolor;

}

</style>

打包js文件

webpack只支持一些不算太高级的ES6语法，要完整支持ES6高级语法，需要安装babel-loader，有babel-loader是一个js高级语法编译器，它处理之后会自动交给webpack打包到bundle.js

1.cnpm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D

2.cnpm i babel-preset-env babel-preset-stage-0 -D

注：babel-loader必须是7.1.5，其它版本装了报错。

在webpack.config.js注册babel-loader

module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader',exclude:/node_modules/ } //exclude设置被babel-loader编译所排除的目录，如果这个目录被转换，耗时很长而且不能成功运行
        ]
}

在项目根目录（与package.json同级）创建一个.babelrc的json文件（注：文件名起始处带.号，不带json后缀名）用于注册babel-loader所使用的插件和语法

{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}

在main.js中写测试代码

class Person{
static personCount=100;
}

alert(Person.personCount);

import时的路径提示工具

安装扩展工具：Path Intellisense后，在设置种打开json配置输入以下红色部分的代码

{
    "editor.renderLineHighlight": "gutter",
    "editor.mouseWheelZoom": true,
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }
}

在项目根目录下创建jsconfig.json，该文件与package.json同级

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

安装vue-cil

vue-cil自带完整的目录结构，先装package.json、再装webpack-cil、webpack，最后安装vue-cil

1.npm install --global vue-cli

2.安装好后，在C:\Users\Andminster\AppData\Roaming\npm下的node_modules目录下会看到vue-cil

3.创建一个目录，shift右键该目录打开命令行工具，输入：vue init webpack 你准备创建的项目名称（不能有大写字母），接下来会弹出一些提示如图所示，一路回车或yes or no之后，vue-cil会自动为你在你创建的目录下面创建一个完整的vue项目目录。

如果是在visual studio中使用vue项目，由于vue-cil已经完整创建了项目结构，所以只需要在vs中：文件-打开-网站，选择你的项目目录即可把项目载入到vs中

自动打开网站

打开package.json文件，为webpack-dev-server增加：--open --hot。

运行

一切就绪之后，关掉命令行工具，再shift右击项目目录（是vue-cil自动创建的，不是你手动创建的目录）运行npm run dev，因为安装vue-cil是在项目目录的上级目录开始的，此时不退出你运行vue项目，会提示找不到文件。

cannot get

如果打开网站后提示cannot get，可能是没有安装sass处理包，sass安装参考：全局引入scss（vue-cil + webpack适用）

webpack.base.conf.js

此文件就是配置处理各种文件的loader的地方。默认情况下不需要改动。

关闭浏览器控制台eslint对错误的提示

打开config目录下的index.js，将useEslint设为false

vue.config.js

这个文件位于与package.json相同的目录，默认没有创建，你可以自行创建，它会在终端运行 vue-cli-service 时，先找到vue.config.js，获取到你的相关配置，才继续执行其它操作，具体配置结构如下，可直接复制粘贴到vue.config.js中。

module.exports = { // 部署应用包时的基本 URL publicPath: process.env.NODE_ENV === 'production' ? '//your_url' : '/', // 运行 vue-cli-service build 时生成的生产环境构建文件的目录 // 默认构建前清除文件夹(构建时传入 --no-clean 可关闭该行为 outputDir: 'dist', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 assetsDir: 'static', // 指定生成的 index.html 的输出路径 (相对于 outputDir),也可以是一个绝对路径 indexPath: 'index.html', // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存 filenameHashing: true, // 当在 multi-page 模式下构建时，webpack 配置会包含不一样的插件 // (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。 // 如果你试图修改这些插件的选项，请确认运行 vue inspect pages: { index: { // page 的入口 entry: 'src/pages/index/index.js', // 模板来源 template: 'src/pages/index/index.html', // 在 dist 的输出为 index.html filename: 'index.html', // 当使用 title 选项时， // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> title: '首页', // 在这个页面中包含的块，默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时， // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话，就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 // 多入口时，接着写子页面 //subpage: 'src/subpage/main.js' }, // eslint-loader 是否在保存的时候检查 lintOnSave: true, // 是否使用包含运行时编译器的Vue核心的构建 runtimeCompiler: false, // 默认情况下 babel-loader 忽略其中的所有文件 node_modules， // 想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来 transpileDependencies: [], // 生产环境 sourceMap productionSourceMap: false, // 跨域设置 // 可取值参考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes crossorigin: undefined, // 构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性, 默认false integrity: false, // webpack 配置，键值对象时会合并配置，为方法时会改写配置 // https://cli.vuejs.org/guide/webpack.html#simple-configuration configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] }, //configureWebpack: (config) => {}, // webpack 链接 API，用于生成和修改 webapck 配置 // https://github.com/mozilla-neutrino/webpack-chain chainWebpack: ( config ) => { // 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS config.optimization .splitChunks( { cacheGroups: {} } ); // 'src/lib' 目录下为外部库文件，不参与 eslint 检测 config.module .rule( 'eslint' ) .exclude .add( '/Users/maybexia/Downloads/FE/community_built-in/src/lib' ) .end() }, // 配置高于chainWebpack中关于 css loader 的配置 css: { // false 时只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块 // true 时可以去掉文件名中的 .module，并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块 modules: false, // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中 // 生产环境下是 true，开发环境下是 false extract: true, // 是否构建样式地图，设置为 true 之后可能会影响构建的性能 sourceMap: false, // css预设器配置项 loaderOptions: { css: { // 这里的选项会传递给 css-loader }, postcss: { // 这里的选项会传递给 postcss-loader } } }, // 所有 webpack-dev-server 的选项都支持 // https://webpack.js.org/configuration/dev-server/ devServer: { open: true, host: '127.0.0.1', port: 3000, https: false, hotOnly: false, // 将任何未知请求 (没有匹配到静态文件的请求) 代理到该字段指向的地方 proxy: null, before: app => { } }, // 构建时开启多进程处理 babel 编译 // 是否为 Babel 或 TypeScript 使用 thread-loader parallel: require( 'os' ).cpus().length > 1, // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // 第三方插件配置 pluginOptions: {}};vue.config.js

关于vue-cil其它参考：Vue2全家桶之一：vue-cli（vue脚手架）超详细教程

常用指令

cls //清除控制台信息
ctrl + c //终止控制台程序的执行
cnpm info 包名//查看远程包的版本号
vue 包名 -V //查看本地包版本号
cnpm uninstall 包名 //卸载包

其它

*处理工具xxx-loder在webpack1.0版本不需要后缀loader

* 如果项目运行失败的错误是端口号问题，可能是端口号被占用，关闭vscode重新打开或打开windows资源管理器，结束进程即可

Javascript - 学习总目录

正文

Javascript - Vue - 在vscode里使用webpack

cnpm（node package manager）和webpack模块

安装packg.json配置文件

安装webpack

package.json

指令的四种模式

webpack打包指令

webpack手动打包

webpack.config.js

webpack-dev-server模块（自动打包）

托管站点根目录

引用node_module目录下的程序包

css打包

处理css文件中的url

处理字体图标

打包less

打包sass

全局引入scss（vue-cil + webpack适用）

打包js文件

import时的路径提示工具

安装vue-cil

常用指令

其它

相关阅读

Webpack打包动态加载的js，webpack打包按需加载

[基础]Webpack开发

老司机带你深入webpack原理与实战

Webpack3.0视频教程从Webpack小白到大神

【WEB前端】【No926】2020最新 S硅谷webpack视频教程

【编程开发技术】前端大牛高阶技术实战-四大维度解锁Webpack 前端工程化 Webpack视频教程

四大维度解锁Webpack3.0工具全技能视频 Webpack教程

如何推广她理财，如何推广她理财的人

目录[+]

cnpm（node package manager）和webpack模块

安装packg.json配置文件

安装webpack

package.json

指令的四种模式

webpack打包指令

webpack手动打包

webpack.config.js

webpack-dev-server模块（自动打包）

托管站点根目录

引用node_module目录下的程序包

css打包

处理css文件中的url

处理字体图标

打包less

打包sass

全局引入scss（vue-cil + webpack适用）

打包js文件

import时的路径提示工具

安装vue-cil

常用指令

其它

相关阅读

Webpack打包动态加载的js，webpack打包按需加载

[基础]Webpack开发

老司机带你深入webpack原理与实战

Webpack3.0视频教程 从Webpack小白到大神

【WEB前端】【No926】2020最新 S硅谷webpack视频教程

【编程开发技术】前端大牛高阶技术实战-四大维度解锁Webpack 前端工程化 Webpack视频教程

四大维度解锁Webpack3.0工具全技能视频 Webpack教程

如何推广她理财，如何推广她理财的人

目录[+]

Webpack3.0视频教程从Webpack小白到大神