webpack 知识点

主要作用

1、构建项目

2、自带模块化

3、编译  es6-->es5  typescript-->javascript

4、自带服务器（服务基于node      webpack-dev-server）

5、vue、react  都是用webpack环境构建

安装 webpack

npm install -g webpack

4.0以上还得安装

npm install -g webpack-cli@2.x

初始化项目

npm init -y

npm install --save-dev webpack@3.x              ( 用3版本安装项目依赖)参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中，包安装在指定项目的node_modules文件夹下

相当于npm install -D webpack@3.x

webpack js中自带模块化

支持node 中的  

module.exports = {
}
module.exports = function(){
}

const Square = require('./square.js');

 

编译js

D:WebstormProjectswebpack1>webpack src/app.js dist/bundle.js     入口文件   出口文件

或者配置webpack.config.js

const path = require('path');

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

__dirname  项目路径

执行
webpack
会默认找webpack.config.js

手动创建webpack.config.js     可以叫其他名称




在package.json 中配置  代替   webpack命令

"scripts": {
  "built":"webpack"
},

npm run built

webpack自带服务器

安装服务器

D:WebstormProjectswebpack1>npm install -g webpack-dev-server@2.x

本地安装

D:WebstormProjectswebpack1>npm install -D webpack-dev-server@2.x

运行服务器

D:WebstormProjectswebpack1>webpack-dev-server

代替webpack-dev-server命令 在

package.json 中配置

"scripts": {
  "built": "webpack",
  "dev":"webpack-dev-server"
},
npm run dev

   配置项目默认访问路径  

--content-base dist

"dev":"webpack-dev-server --content-base dist"

相当于
http://localhost:8080/dist

热更新

--inline

"dev":"webpack-dev-server --content-base dist --inline"

修改端口

--port=8081

"dev":"webpack-dev-server --content-base dist --inline --hot --port=8081"

本地安装json-loader  将json格式的数据转换成js对象  
默认已经安装

npm install -D json-loader

const path = require('path');

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

    module:{
        rules:[
            {
                test:/.json$/,
                use:"json-loader"
            }
        ]
    }
};