1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g

1.1)输密文的密码(电脑开机)
1.2)安装成功

2. 输入命令mkdir config dist src创建三个文件夹

3.输入命令npm init -y

4. 输入命令touch dist/index.html src/index.js分别dist和src文件夹下面创建一个index.html文件和index.js文件

5. webpack4.x中打包默认找src/index.js作为默认入口,可以直接在终端中输入命令webpack 将当前的内容进行一个简单的打包

5.1) 应该看到打包的时候终端中会出现黄色的警告提示

5.2)mode是webpack中独有的,有两种打包环境,一个是开发环境:development另外一个是生产环境:production
打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了
5.3)webapck --mode=production命令打包,这个是代码压缩过的,同时项目文件夹下面多了 一个node_modules文件夹

6.输入命令touch config/webpack.dev.js创建文件

7. 输入命令rm dist/main.js src/index.js移除掉这两个文件我们自己来配置

7.1) 现在在src文件夹下面创建main.js文件
7.2)进入到webpack.dev.js文件中进行配置,具体在代码中注释

7.3) 现在不能执行之前的webpack --mode="development"命令了会报下面的错误没有放在src文件夹内;这里是因为webpack4打包默认找的src下面的index.js入口,我们前面已经删除了,这里src下面死main.js文件,所以找不到就报ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'错误,所以这里我们到packsge.json里面配置下命令,让打包的时候执行我们在config/webpack.dev.js下面配置的入口。

启动配置

8.npm run build 就可以了;

简单配置 webpack.dev.js

module.exports = {
entry: ['./src/okcPages/okMainIndex.js', './src/units/remChange.js','./src/okcPages/initCp.js'],
output: {
publicPath: '/', //这里要放的是静态资源CDN的地址
path: path.resolve(__dirname, 'dist'),
filename: 'build.js' // 单文件输出 ,如果多文件可在 entry :{} ,这里 filename: '[name].js'
},
resolve: {
extensions: [".js", ".css", ".json"],
alias: {
// jquery: './src/units/jquery-1.83.min.js',
} //配置别名可以加快webpack查找模块的速度
},
externals: {
jquery: 'window.$'
},
module: {
// 多个loader是有顺序要求的,从右往左写,因为转换的时候是从右往左转换的
rules: [
{
test: /.css$/,
use: ExtractTextWebapckPlugin.extract({
fallback: 'style-loader',
use: ['css-loader'] // 不再需要style-loader放到html文件内
}),
include: path.join(__dirname, 'src'), //限制范围,提高打包速度
exclude: /node_modules/
},
{
test: /.jsx?$/,
use: {
loader: 'babel-loader',
query: { //同时可以把babel配置写到根目录下的.babelrc中
presets: ['env', 'stage-0'] // env转换es6 stage-0转es7
}
}
},
{ //file-loader 解决css等文件中引入图片路径的问题
// url-loader 当图片较小的时候会把图片BASE64编码,大于limit参数的时候还是使用file-loader 进行拷贝
test: /.(png|jpg|jpeg|gif|svg)/,
use: {
loader: 'url-loader',
options: {
outputPath: 'images/', // 图片输出的路径
limit: 1 * 1024
}
}
}
]
},
plugins: [
// 多入口的html文件用chunks这个参数来区分
/* new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src', 'index.html'),
filename: 'index.html',
hash: true,//防止缓存
minify: {
removeAttributeQuotes: true//压缩 去掉引号
}
}),*/
new ExtractTextWebapckPlugin('css/build.css'), // 其实这个特性只用于打包生产环境,测试环境这样设置会影响HMR
// new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
],
devtool: 'eval-source-map', // 指定加source-map的方式
devServer: {
contentBase: path.join(__dirname, "dist"), //静态文件根目录
port: 3824, // 端口
host: 'localhost',
overlay: true,
compress: false // 服务器返回浏览器的时候是否启动gzip压缩
},
watch: true, // 开启监听文件更改,自动刷新
watchOptions: {
ignored: /node_modules/, //忽略不用监听变更的目录
aggregateTimeout: 500, //防止重复保存频繁重新编译,500毫米内重复保存不打包
poll: 1000 //每秒询问的文件变更的次数
},

配置js压缩

uglifyjs-webpack-plugin(JS压缩插件,简称uglify) webpack4 已经集成;
const uglify = require('uglifyjs-webpack-plugin');
plugins:[
new uglify()
],
这个时候我们再终端运行命令 npm run bulid 进行打包会提示下载webpack-cli 命令输入yes

webpack都有哪些插件?

1.)html生成插件: html-webpack-plugin
2.)css分离的插件:extract-text-webpack-plugin new extractTextPlugin("css/index.css") //这里的/css/index.css 是分离后的路径
3.)处理HTML中的图片:html-withimg-loader
4.)自动处理CSS3属性前缀:postcss-loader 和 autoprefixer
5.)消除未使用的css 和js: purify-css purifycss-webpack
6.)copy 插件 :copy-webpack-plugin
7.)编译输出文件前,删除旧文件: clean-webpack-plugin
8.) 压缩css,优化css结构,利于网页加载和渲染 : optimize-css-assets-webpack-plugin
9.) 打包编译时,显示进度条: progress-bar-webpack-plugin
10.) 规范scss, less,css书写规则:stylelint-webpack-plugin
11.) 将CSS解压到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件:webpack4用mini-css-extract-plugin 代替了 extract-text-webpack-plugin
12.)减少构建时间:webpack-parallel-uglify-plugin
13.)加快编译速度:happypack
14.)资源路径与问件名对应:assets-webpack-plugin
参考原文:https://segmentfault.com/a/1190000015355816

1.路径问题

var website ={
publicPath:"http://localhost:8888/"
// publicPath:"http://192.168.1.103:8888/"
}
声明一个变量查找更快 publicPath:website.publicPath 使用webpack命令进行打包,你会发现原来的相对路径改为了绝对路径

2. 处理HTML中的图片

在webpack中是不喜欢你使用标签来引入图片的,但是我们作前端的人特别热衷于这种写法,国人也为此开发了一个:html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题,如何把图片放到指定的文件夹下html-withimg-loader;

npm install html-withimg-loader --save-dev
{
test: /.(htm|html)$/i,
use:[ 'html-withimg-loader']
}

3.)自动处理CSS3属性前缀:postcss-loader 和 autoprefixer

postCSS推荐在项目根目录(和webpack.config.js同级),建立一个postcss.config.js文件。

module.exports={
plugins: [
require('autoprefixer') //自动添加前缀插件
]
}
在webpack.dev.cnfig.js中配置:
{
test:/.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use:[{loader:"css-loader"},
{
loader:"postcss-loader",
},
]
})
},

4.消除未使用的CSS 安装PurifyCSS-webpack

PurifyCSS-webpack要依赖于purify-css这个包,所以两个都要下载
npm install purifycss-webpack purify-css --save-dev
因为我们需要同步检查html模板,所以我们需要引入node的glob对象使用。在webpack.dev.config.js文件头部引入glob
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
new PurifyCSSPlugin({
//这里配置了一个paths,主要是需找html模板,purifycss根据这个配置会遍历你的文件,查找哪些css被使用了。
paths: glob.sync(path.join(__dirname, 'src/*.html')),
}),

注意: 使用这个插件必须配合extract-text-webpack-plugin这个插件

5)webpack bable 的配置;

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
//babel 配置
{
test:/.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
5.1)一般是写到.babelrc 文件夹里
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-0"
]
}
5.2)对比.webpack.dev.config.js里的loader配置
babel 配置
{
test:/.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/
}

参考原文:简书(素时年锦 )webpack4.x入门配置

webpack4 入门配置研究的更多相关文章

  1. webpack4入门配置

    下面是抄过来的,方便自己翻越 webpack4.x入门配置   1.首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管 ...

  2. webpack4入门

    前提 已安装node(版本号>4.0,已自带NPM) mac机器 有一个空目录 无webpack.config.js配置打包 快速构建package.json文件. npm init -y 安装 ...

  3. webpack4入门到进阶案例实战课程

    愿景:"让编程不在难学,让技术与生活更加有趣" 更多教程请访问xdclass.net 第一章 webpack4前言 第一集 webpack4入门到进阶案例实战课程介绍 简介:讲述w ...

  4. Spring-MVC开发步骤(入门配置)

    Spring-MVC开发步骤(入门配置) Step1.导包 spring-webmvc Step2.添加spring配置文件 Step3.配置DispatcherServlet 在web.xml中: ...

  5. CEPH集群操作入门--配置

      参考文档:CEPH官网集群操作文档   概述 Ceph存储集群是所有Ceph部署的基础. 基于RADOS,Ceph存储集群由两种类型的守护进程组成:Ceph OSD守护进程(OSD)将数据作为对象 ...

  6. mybatis入门配置和调试

    欢迎转载http://www.cnblogs.com/jianshuai520/p/8669177.html大家一起努力,如果看的时候有图片半边遮挡起来的话,右键查看图片,就可以观看完整的图片,具体怎 ...

  7. webpack快速入门——配置JS压缩,打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  8. 01-项目简介Springboot简介入门配置项目准备

    总体课程主要分为4个阶段课程: ------------------------课程介绍------------------------ 01-项目简介Springboot简介入门配置项目准备02-M ...

  9. webpack入门配置

    webpack入门配置 根据该篇文章进行配置: 入门 Webpack,看这篇就够了 其中由于版本更新的问题会出现几个问题: 1.Would you like to install webpack-cl ...

随机推荐

  1. 类的私有private构造函数 ,为什么要这样做

    通常我们都将构造函数的声明置于public区段,假如我们将其放入private区段中会发生什么样的后果?没错,我也知道这将会使构造函数成为私有的,这意味着什么? 我们知道,当我们在程序中声明一个对象时 ...

  2. Msys2编译Emacs

    Msys2编译Emacs */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #839496;} Msy ...

  3. 判断url

    //判断url地址 isUrl(str){ let reg = /[0-9a-zA-z]+.(html|htm|shtml|jsp|asp|php|com|cn|net|com.cn|org)$/; ...

  4. 使用IO流将数据库中数据生成一个文件,结果使用Notepad++打开部分数据结尾出现NUL

    场景描述: 项目中通过java代码中从数据库中查询一系列数据,对数据做相应处理,然后通过字符流将数据写如一个新生成的文件中,将该项目部署在linux服务器上,最后生成的文件拿到本地使用notepad+ ...

  5. JS综合面试题1

    function foo(){ getName = function () { alert(1); }; return this; } Foo.getName = function(){ alert( ...

  6. 2018-8-10-win10-UWP-ListView-

    title author date CreateTime categories win10 UWP ListView lindexi 2018-08-10 19:16:53 +0800 2018-2- ...

  7. mysql导入.csv文件出错

    1.报错信息 ERROR 1290 (HY000): The MySQL server is running with the --secure-file-priv option so it cann ...

  8. ICPC2008哈尔滨-A-Array Without Local Maximums

    题目描述 Ivan unexpectedly saw a present from one of his previous birthdays. It is array of n numbers fr ...

  9. Android AppCompatActivity去掉actionbar fullScreen

    网上已经有很多关于这个问题的解决方案,如果你试了都没有解决,那么请往下看.首先说下网上说的解决方案: 方案一:在AndroidManifest.xml中,为需要进行全屏显示的activity添加如下主 ...

  10. mysql的事务四个特性以及 事务的四个隔离级别

    一.事务四大属性 分别是原子性.一致性.隔离性.持久性. 1,原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,因此事务的操作如果成功就必须要完全应用到数据库, ...