webpack 使用devserver启动本地项目

//使用webpack-dev-server，可以用http启动本地项目，方便发起http请求，file本地不能发请求

1、安装webpack、webpack-cli@3.3.12、webpack-dev-server

yarn add webpack webpack-cli@3.3.12 webpack-dev-server html-webpack-plugin

//webpack-cli安装高版本会报错,暂时不兼容,html-webpack-plugin在项目打包后生成html

2、webpack.config.js配置

const HtmlWebpackPlugin=require('html-webpack-plugin')
const path = require('path')
module.exports = {
  entry:{
      main:'./src/main.js'
  },
  devServer:{
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    open:true
  },
  plugins:[
   new HtmlWebpackPlugin({
       template:'./src/public/index.html'     //在这个目录下建立index.html文件，body里面加上<div ></div>
   })
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

3、在package.json中配置

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },

4、在入口文件src/main.js中写上如下代码

let dom=document.querySelector('#root')
let text=document.createElement('div')
console.log(dom)
text.innerText='我是新创建的html3'
dom.appendChild(text)

5、yarn start ，可以见到项目启动，修改innerText可以立即更新到浏览器上，项目配置成功!

webpack 使用devserver启动本地项目

相关推荐