webpack 知识点

 

安装 webpack

npm install -g webpack

npm install -g webpack-cli@2.x

 

初始化项目

npm init -y

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

 

webpack js中自带模块化

D:\WebstormProjects\webpack1>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'
    }
};

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

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

npm run built

webpack自带服务器

安装服务器

D:\WebstormProjects\webpack1>npm install -g webpack-dev-server@2.x

本地安装

D:\WebstormProjects\webpack1>npm install -D webpack-dev-server@2.x

运行服务器

D:\WebstormProjects\webpack1>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"            }        ]    }};