关于webpack配置

package.json文件中
{"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --hot --mode development --port 3000"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.6",
    "less": "^3.0.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.7.2",
    "sass": "^1.0.0-rc.1",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1"
   }

}


webpack.config.js文件
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
  entry:path.join(__dirname,'./index.js'),
  output:{
      path:path.join(__dirname,'./js'),
      filename:'test.js'
  },
  plugins:[
      new htmlWebpackPlugin({
          template: path.join(__dirname,'./index.html'),
          filename:'index.html'
      })
  ],
  module:{
      rules:[
          {test:/\.css$/,use:['style-loader','css-loader']},
          {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
          {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
          {test:/\.(png|jpg|bmp|gif|jpeg)$/,use:'url-loader?limit=1000&name=[hash:8]===[name].[ext]'},
          {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
          {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
      ]

  }

 resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@': path.join(__dirname, './src') 
    }
  }

  }


.babelrc文件

{
  "plugins":["transform-runtime"],
  "presets":["env","stage-0"]
}

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭