两天学会用Webpack打包前端代码-day01

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

什么是 Webpack?

使用 Webpack

体验webpack打包过程

修改 Webpack 打包入口和出口

入口

出口

自动生成 html 文件

安装

基本用法 

打包 css 代码

打包 less 代码

打包图片


什么是 Webpack?

定义:

静态模块:指的是编写代码过程中的,html,css,js,图片等固定内容的文件
打包 :把静态模块内容,压缩,整合,转译等(前端工程化)
        把 less / sass 转成 css 代码
        把 ES6+ 降级成 ES5
        支持多种模块标准语法

使用 Webpack

步骤:
1. 新建并初始化项目,编写业务 源代码
2. 下载 webpack webpack-cli 到当前项目中(版本独立),并 配置 局部自定义命令

两天学会用Webpack打包前端代码-day01_第1张图片

3. 运行 打包 命令,自动产生 dist 分发文件夹(压缩和优化后,用于最终运行的代码)

 两天学会用Webpack打包前端代码-day01_第2张图片

体验webpack打包过程

第一步:初始化

第二步:编写代码两天学会用Webpack打包前端代码-day01_第3张图片

两天学会用Webpack打包前端代码-day01_第4张图片

第三步: 下载 webpack webpack-cli 到当前项目中(版本独立),并配置局部自定义命令

两天学会用Webpack打包前端代码-day01_第5张图片

 第四步:运行打包命令,自动产生 dist 分发文件夹

 两天学会用Webpack打包前端代码-day01_第6张图片

修改 Webpack 打包入口和出口

入口

入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

默认值是 ./src/index.js,但你可以通过在 webpack configuration 中配置 entry 属性,来指定一个(或多个)不同的入口起点。例如:

module.exports = {
  entry: './path/to/my/entry/file.js',
};

出口

output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段,来配置这些处理过程:

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

自动生成 html 文件

安装

npm install --save-dev html-webpack-plugin

基本用法 

该插件将为你生成一个 HTML5 文件, 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中,如下所示:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

这将会生成一个包含以下内容的 dist/index.html 文件:



  
    
    webpack App
  
  
    
  

如果你有多个 webpack 入口,他们都会在已生成 HTML 文件中的 

你可能感兴趣的:(#,前端Webpack入门,webpack,前端,node.js,JavaScript,开发语言)