前端构建工具webpack使用笔记

原创 2018年04月16日 10:58:21

首先确保已经安装了最新版的node.js

生成package.json文件

打开命令行切换到项目文件夹

npm init
项目名称与版本为必填信息,其他选填即可。

安装webpack

打开命令行切换到项目文件夹安装webpack

npm install --save-dev webpack

使用配置文件进行构建

在项目文件夹下新建一个配置文件webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

构建前要先安装webpack-cli

npm install -D webpack-cli

切换到当前文件夹输入以下命令进行构建

npx webpack --config webpack.config.js

加载css

为了从 JS 模块中引入一个 CSS 文件需要安装style-loader和css-loader。

npm install --save-dev style-loader css-loader

修改配置文件webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
  	rules: [{
  		test: /\.css$/,
  		use: ['style-loader', 'css-loader']
   	}]
  }
};

在js文件中引入css

require('../css/style.css');

使用HtmlWebpackPlugin

安装HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
修改配置文件webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 加入 html 模板任务
    new HtmlWebpackPlugin({
        // 模板文件
        template: './src/index.html',
        // 打包后文件名称,会自动放到 output 指定的 dist 目录
        filename: 'index.html'
    })
  ]
};

使用CopyWebpackPlugin复制文件

安装CopyWebpackPlugin
npm install --save-dev copy-webpack-plugin
修改配置文件
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 复制文件
    new CopyWebpackPlugin([
      {
        // 目标文件
        from: './src/images',
        // 输出到
        to: './images'
      }
    ])
  ]
};

使用UglifyJsPlugin压缩文件

安装UglifyJsPlugin

npm i -D uglifyjs-webpack-plugin
修改配置文件webpack.config.js
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 压缩文件
    new UglifyJsPlugin()
  ]
};

使用ExtractTextWebpackPlugin打包css文件

安装ExtractTextWebpackPlugin
npm install --save-dev extract-text-webpack-plugin
在webpack 4x下使用这个版本会报错所以我们选择安装最新的版本
npm install --save-dev extract-text-webpack-plugin@next
在index.js中引入css
require('../css/style.css');
修改配置文件
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
    }]
  },
  plugins: [new ExtractTextPlugin("style.css")]
};

使用clean-webpack-plugin

用于每次构造之前删除dist文件夹

安装

npm install clean-webpack-plugin --save-dev
修改配置文件
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 每次构建删除dist文件夹
    new CleanWebpackPlugin(['dist'])
  ]
};

使用 webpack-dev-server

安装webpack-dev-server

npm install --save-dev webpack-dev-server
修改配置文件
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // server
  devServer: {
    contentBase: './dist'
  }
};
修改package.json,在scripts中添加start
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open"
  },
命令行中输入 npm start运行



具体使用方法参考官方文档:https://doc.webpack-china.org/guides/

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41418386/article/details/79957490

Delphi 6 的新功能

 WHATS NEW IN DELPHI 6 BizSnap™ simplifies eBusiness integration by easily and seamlessly creating a...
  • sdx
  • sdx
  • 2001-05-13 15:02:00
  • 545

前端自动化构建工具Webpack1.x开发模式使用指南

WebpackWebpack是时下最流行的模块打包器 它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件 进行分析、压缩、合并、打包,最后生成浏览器支持的代码 特点: 代码...
  • q1056843325
  • q1056843325
  • 2017-01-18 20:01:49
  • 5955

gulp前端自动化构建工具(一):工具介绍和使用

本工具基础gulp自动化工具构建,可适用于整个前端开发时间线,使用时较简单,在配置完后输入自定义命令即可使用本工具。...
  • franks_t_d
  • franks_t_d
  • 2016-10-08 16:19:55
  • 1990

打包工具(构建工具)-webpack

webpack
  • anxin_wang
  • anxin_wang
  • 2017-11-30 17:13:16
  • 31

从Npm Script到Webpack,6种常见的前端构建工具对比

从Npm Script到Webpack,6种常见的前端构建工具对比小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求...
  • broadview2006
  • broadview2006
  • 2018-01-18 08:53:19
  • 426

webpack3.x模块化与自动化详解

webpack是前端模块化和自动化流出的构建工具。本课程从webpack起源、前端遇到是问题开始,讲解webpack的部署、优化,以及代码拆分、实时编译等高级特性
  • 2018年01月21日 11:37

前端自动化构建入门6-使用webpack改造我们的react应用

认识webpackwebpack是一个简单方便的模块打包工具,你可以利用webpack对你代码进行分块打包、代码转译。webpack是目前最流行的模块打包工具之一。 更详细的介绍可以参照这里。注意:...
  • Nex_x
  • Nex_x
  • 2017-06-27 15:26:09
  • 601

webpack构建工具

第一、安装node,安装好后,npm -v 查看版本,然后利用包管理器npm安装各种包 第二、创建目录结构类似下图 app文件夹下放置我们的开发文件,比如 index.less文件和主逻辑main...
  • a2500397
  • a2500397
  • 2017-11-16 11:22:45
  • 306

webpack gulp 实现完整前端工程化

作者:陈学家 链接:https://zhuanlan.zhihu.com/p/21312474 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 在前面的两个小节中已...
  • java_goodstudy
  • java_goodstudy
  • 2016-10-12 14:58:01
  • 1937

前端构建工具是什么?

前端构建工具是什么 感谢原知乎答案,前端构建工具是什么? - Jasin Yip的回答 - 知乎 前端构建工具通常可以在前面加【自动化】三个字,就是用来让我们不再做机械重复的事情,解放我们的双手的...
  • wind_ghoul
  • wind_ghoul
  • 2018-01-18 18:12:15
  • 97
收藏助手
不良信息举报
您举报文章:前端构建工具webpack使用笔记
举报原因:
原因补充:

(最多只允许输入30个字)