webpack+javascript搭建项目环境大概流程和各个流程的功能作用
前言
本文是对项目开发中webpack+原生js搭建流程的步骤梳理,和常见配置项的功能讲解.并不适用于vue/react框架
因为实际项目上的配置代码过多,放在一章写太长了,怕看不下去,所以实际代码另写在这里,两篇文章可以搭配看:https://www.cnblogs.com/liuXiaoDi/p/12245421.html
webpcak里配置的路径都建议使用path绝对路径
初始化
1.创建文件夹
2.npm init -y,执行这句话的目的是生成package.json文件
安装webpack 和webpack-cli
1.yarn add webpack webpack-cli@3.3.10 -D
(这里指定webpack-cli版本是因为,webpack-cli最新的版本是4.xx测试版,和我的webpack-dev-server发生了冲突,导致dev-sever启动不起来),如果你在项目中出现了dev-server的问题,可以试着降低一下webpcak-cli的版本
创建config文件夹做开发环境和生产环境的配置
webpack的规则设置在webpack.config.js文件中.
但是!!!实际开发中,产品有多个环境比如开发环境/测试环境/线上环境,每个环境的配置规则都不同.显然只靠webpack.config.js这一个文件不能满足我们的需求,我们需要拆分webpack.config.js
通常webpack.config.js拆分为3个文件:
1.base.config.js
2.dev.config.js
3.pro.config.js
webpack基本配置项
entry
作用指明webpack打包时,使用那个模块作为构建依赖图的起点.webpack进入起点后会找出直接和间接的依赖,每个依赖随即被处理最终输入到bundle文件中
entry中的模块路径最好是绝对路径,entry常见两种配置:
单页应用(常见):
const config = { entry: path.join(__dirname,'../src/main.js') };
多页应用:如下告诉 webpack 需要 2 个独立分离的依赖图.多页应用在每次页面跳转时都会去获取新的html页面和重新下载相关资源
const config = { entry: { pageOne: path.join(__dirname,'./src/pageOne/index.js'), pageTwo:path.join(__dirname,'./src/pageTwo/index.js')
}
};
output
作用是设置webpack如何向硬盘输出编译后的文件.注意即使是多页面应用页也只能指定一个输出配置,多页应用的时候为了保证每个输出的文件名具有唯一性,要使用占位符
output属性最基本设置要包含filename和path
多入口entry对应的output
const config = { entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' }// 写入到硬盘：./dist/app.js, ./dist/search.js }; module.exports = config;
单入口entry对应的output
const config = { output: { filename: 'bundle.js', path: '/home/proj/public/assets' } }; module.exports = config;
mode
模式,webpack提供2中模式,每种模式对应不同的内置优化:development是开发环境,production是生产环境
module.exports = { mode: 'development' }
module
module.rules
规则数组,成员是对象,每个对象用于对特定的文件配置相关loader处理.对象内的常用规则如下:
- test值是匹配规则,针对符合规则的文件进行处理
- include值是路径,路径内的文件一定会使用loader处理
- exclude值是路径,路径内的文件一定不会使用loader处理
- use指定使用的loader和loader相关配置项,use的规则在下面会具体说明
use规则
use可以是字符串
use可以是数组,当为数组时,内部成员可以是字符串也可以是对象,内部成员是对象时,有loader和options字段.loader指定我们需要的loader名称,options是对使用的loader的配置
module.rules的例子
module: { rules: [ { test: /\.js$/, loader: "babel-loader", exclude: path.join(__dirname, "../node_modules") }, { //引入非模块化的插件 test: require.resolve('zepto'), //转化成模块的方式 loader: 'exports-loader?window.Zepto!script-loader' }, { test: /\.(png|jpg|gif|svg)$/, use: { loader: "url-loader", options: { //options内部是对url-loader的配置 limit: 2048, name: "img/[name].[ext]" } }, exclude: path.join(__dirname, "../node_modules") }, ] }
resolve
resolve用于设置模块如何被解析,通常我们使用webpcak的默认解析配置.对于解析方式我们常用的只有路径别名配置
resolve.alias
resolve用于路径别名的配置,相当于给不同的路径起简称,使用如下
resolve: { //别名的配置,相当于给不同的路径起简称 alias: { "@": path.join(__dirname, "../src"), "view": path.join(__dirname, "../src/view"), "controller": path.join(__dirname, "../src/controller"), "lib": path.join(__dirname, "../src/lib"), "router": path.join(__dirname, "../src/router"), "styles": path.join(__dirname, "../src/styles"), "api":path.join(__dirname,"../src/api"), "model":path.join(__dirname,"../src/model"), "utils":path.join(__dirname,"../src/utils") } },
//在配置文件中配置完成后,我们在具体的js文件中使用
未配置前使用:import Header from '../../../src/component/header'
配置完成后使用:import Header from '@/component/header';
@就等于src的绝对路径
- plugins
-
六.plugins常用的插件
这几个插件用于包的配置
html-webpack-plugin
clean-webpack-plugin
copy-webpack-plugin
extract-text-webpack-plugin
下载以上这些
yarn add html-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-text-webpack-plugin@next -D
七.常用loader
用于对模块的源代码进行转化,loader可以使你在import或者加载模块时预处理文件,类似于其他构建任务的task,比如可以将es6转化为es5,
处理js的loader
babel-loader
@babel/core
@babel/preset-env
yarn add babel-loader @babel/core @babel/preset-env -D
根目录下创建.babelrc文件,在该文件内做babel相关loader的配置
处理图片的loader
url-loader
file-loader
yarn add url-loader file-loader -D
处理css的laoder
style-loader:把.css文件以<style>形式引入到html中(传统方式以<link>形式在html中引入css)
css-loader:加载.css文件
node-sass:处理sass
postcss-loader
atutoprefixer
yarn add 以上这些
yarn add style-loader css-loader sass-loader postcss-loader autoprefixer -D
处理vue单文件组件(如果做vue项目的化,看这里)
vue-loader
vue-template-compiler
yarn add vue-loader vue-template-compiler -D
八.合并webpack配置项
yarn add webpack-merge -D
九.webpack服务
yarn add webpack-dev-server -D
