技术联盟

webpack 简单使用

webpack 简单使用

webpack是目前前端开发最流行的打包工具之一,今天就一步一步构建

初始化npm工程

npm init 创建npm 工程 根据自己的需求进行配置项目

添加webpack 依赖

npm i webpack –save-dev

安装webpack

安装成功之后,在package.json中在 devDependencies中有 webpack

使用webpack打包 js

创建js文件

  1. 创建module.js
  2. 创建app.js

module.js 文件内容

export const log = function(){

​ // document.write('module.js loaded');

​ console.log('module.js loaded');

}

app.js

import moduleLog from './module.js';

import './style.css';

moduleLog();

document.write('app.js loaded');

  1. 创建index.html

<!DOCTYPE html>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

webpack测试

<script src="dist/bundle.js"></script>

创建完成之后,我们开始webpack打包 app.js

./node_modules/.bin/webpack app.js -o dist/bundle.js

执行完成 直接运行index.html 查看运行结果

app.js loadedmodule.js loaded

配置webpack.config.js

通常我们使用webpack命令行进行打包的时候,简单的话,还没有关系,要是想实现更多的功能的时候,我们不能一直添加很长很长的命令行吧,每次打包,你记得住吗?为此我们需要创建 webpack.config.js

const path = require('path');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

​ entry: './app.js',

​ output: {

​ path: path.join(__dirname,'dist'),

​ publicPath: './dist/',

​ filename: 'bundle.js'

​ },

​ devServer: {

​ port: 3000,//服务端口

​ publicPath: 'dist'//打包后资源路径,后面会详细解释

​ },

​ module: {

​ rules: [

​ {

​ test: /.css$/,

​ loader: style-loader!css-loader

​ }

​ ]

​ },

​ plugins: [

​ new UglifyJsPlugin()

​ ]

}

entry: 打包入口

output: 输出配置

​ path: 路径配置

​ publicPath: 公共路径

​ filename:打包后的文件名称

devServer: 测试开发服务-可以选的,建议配置,可以实时编译

modules: 配置加载自定义loader

​ rules:表示loader的数组

​ test: loader处理文件的正则表达式

​ loader: loader的名称,通过npm i xxx-loader 安装的各种文件解析的loader

plugins: 工程使用到的插件

package.json

{

"name": "webpack_test",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

​ "test": "echo "Error: no test specified" && exit 1"

},

"author": "",

"license": "ISC",

"devDependencies": {

​ "css-loader": "3.3.2",

​ "style-loader": "1.0.1",

​ "uglifyjs-webpack-plugin": "2.2.0",

​ "webpack": "4.41.2",

​ "webpack-cli": "3.3.10",

​ "webpack-dev-server": "3.9.0"

}

}

这个是整个工程的package.json文件

body{

​ text-align: center;

​ padding: 100px;

​ color: #fff;

​ background-color: #09c;

}

style.css 文件

Share this:

码字很辛苦,转载请注明来自技术联盟《webpack 简单使用》

评论