webpack4.0--安装操作

一、安装webpack

1.全局安装webpack npm install -g webpack
2.初始化项目目录 npm init //可以一路回车
3.在当前项目安装webpack cnpm i webpack
4.安装webpack-cli cnpm i webpack-cli -D ,-D在开发环境中局部安装

• 管理webpack命令行的工具
• webpack3中，webpack和CLI在同一个包里，但webpack4中，分开的，所以，如果—D 不行，就需要全局安装，-g

二、项目配置，打包及引用

1.配置mode,有production和development两个

webpack --mode development

2.项目新建

mkdir/md src   //删除文件是rd/s/q
type nul> src/index.js  //创建入口文件index.js

3.项目打包及引用

src/index.js创建完之后，运行webpack --mode development/production 会自动将src/index.js文件打包到dist/main.js文件（自动生成dist和main.js)
然后，建立html,引用dist/main.js文件即可

• src/index.js 是开发文件，在开发环境使用，可以用ES2017等，但用户环境不支持
• dist/main.js 是最终部署的可以再用户浏览器上正常运行的代码
• webpack 打包就是编译代码使的其可以再用户界面上使用

4.其他参数配置

--watch 实时刷新 文件修改后自动打包
但是它不能实时刷新浏览器，如果需要则安装webpack-dev-server，它的作用是修改后发布到服务器上
--progress 查看进度
--display-modules 显示隐藏的模块
--colors 彩色显示
--display-reasons 显示打包原因

webpack --mode development --watch --progress --display-modules --colors --display-reasons

三、webpack-dev-server--浏览器实时刷新

• 全局安装：cnpm i -g webpack-dev-server
• 在项目中安装并且将依赖写入package.json npm install webpack-dev-server --save-dev
• 写入自动刷新命令webpack-dev-server --mode development --output-public-path dist,指定publicPath,dist是index.html文件所引用js的地址目录.(注意，这里是将文件打包保存在内存中，没有写入磁盘)
• 默认端口8080，如果需要修改则webpack-dev-server --port 3000,可以直接在webpack.config.js配置文件中配置devServer属性，开启热更新和port
• 启动服务，localhost:8080,显示的是根目录的index.html文件，可以修改index.js可以看到页面在实时自动刷新。如果根目录没有index.html，那么将会列出根目录所有文件夹，且页面就不能实时刷新了。

四、打包css

css-loader 处理css文件
style-loader 将css-loader处理之后的文件作为标签<style>插入html
处理css文件的两种方式：

• index.js文件里输入require('style-loader!css-loader!./index.css'),这里的index.css和index.js同级
• 输入命令行 webpack --mode development --module-bind "css=style-loader!css-loader"

cnpm i css-loader style-loader --save-dev

五、配置webpack.config.js

创建对象进行配置

moudule.exports={
    //entry...
}

entry:入口

字符串：单输入
数组，多输入，打包到一块
对象表示(hash),多页面入口

entry : {//入口
       html_1:'./src/html_1/index.js',/*第一个页面入口*/
        html_2:['./src/html_2/index.js','./src/html_2/index2.js'],/*第二个页面入口*/
        app:'./src/app.js',/*应用入口*/
        vendors:'./src/vendors.js',/*第三方入口*/
    }

output:输出

单入口，单出口，固定 output:{filename:'index.js',path:'/dist/js'}
多入口，多出口，name或者hash（MD5或者版本号，唯一性）
publicPath 占位符，上线的时候设置服务器地址

output:{
   filename:'[name].js',/*文件名,或者filename:'[name]-[hash].js'*/
   path:__dirname + '/dist/js'/*文件路径*/，
   publicPath:""
}

如果是node方式,输出路径如下

const path = require("path")
output:{path:path.resolve(__dirname,"./dist/js/bundle.js")};
//path.resolve()方法解析了当前路径，将相对路径改为绝对路径

plugin插件，解决loader解决不了的事情

引用前安装 npm install html-webpack-plugin --save-dev
配置引用 var htmlWebpackPlugin = require('html-webpack-plugin');

plugins:[
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]

loader 让webpack处理非js的文件，因为webpack只理解js

两个目标：

• .test : 需要被转化的文件类型
• .use : 转化时用哪一个loader

所有loader都有exclude和include属性，设置不打包和打包范围

module:{
    rules:[
       { 
       test:/.js$/,
       exclude:/node_modules/,//exclude设置那些不需要用babel-lader，include表示需要用
       loader:"babel-loader"
        }
    ]
}

预配置操作preset,设置如何处理js

• rules 中加入：query:{presets:['latest']}
• 根目录创建.babelrc {"presets":["env"]}
• package.json加入"babel":{"presets":["latest"]}
  babel补充：
  在配置文件中配置，暗转babel，转换es6
  先安装loader cnpm i babel-loader
  安装终端工具 cnpm install -g babel-cli
  安装转换插件 cnpm i babel-preset-env --save-dev
  转换命令demo babel es6.js --presets es2015
  配置.babelrc文件 {"presets":["env"]}或者"babel": {"presets": ["es2015"]}
  具体babel的参考，官方说明文档吧

如果需要重新指定配置文件

//webpack --config 文件名
webpack --config webpack.config2.js

六、定义执行脚本

在package.json中设置,package.json中要用双引号，要不要是编译器报错

  "scripts": {
    "webpack":"webpack --mode development --config webpack.config.js --progress --display-modules --colors --display-reason",
    "server":"webpack-dev-server --mode development --output-public-path dist"
  },

然后命令行敲cnpm run server