webpack常用配置，dependencies和devDependencies的区别

npm init初始化项目

生成package.json 和package-lock.json文件

{
  "name": "mywebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  //-save 安装的插件，则是被写入到 dependencies 区块里面去,是发布到生产环境的，
  //如jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies ；
  "dependencies": {
    "babel-cli": "^6.26.0",
    "webpack-cli": "^4.1.0"
  },
  //用 --save-dev 安装的 插件，被写入到 devDependencies 域里面去,只用于开发环境，不用于生产环境，
  //如webpack这些只是在开发中使用的包，上线以后就和他们没关系了，
  "devDependencies": {
    "extract-text-webpack-plugin": "^3.0.2",
    "webpack": "^5.3.1"
  }
}

package.json详解以及package-lock.json的作用

 

、package-lock.json 版本锁定

• 当我们安装依赖时，package-lock.json 文件会自动生成。里面会描述上一次更改后的确切的依赖管理树，包含了唯一的版本号和相关的包信息。之后的 npm install 会根据 package-lock.json 文件进行安装，保证不同环境、不同时间下的依赖是一样的；
• 由于 package-lock.json 文件中记录了下载源地址，可以加快我们的 npm install 速度。

https://www.cnblogs.com/colder/p/11820212.html 转载

 

创建webpack.config.js配置webapck

var webpack = require('webpack')
// 代码压缩
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true}); 
// 把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件
var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common'); 
// 分离.css。将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
// 引入jquery
var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});
//生成 html 文件。
html-webpack-plugin


module.exports = {
  //model:  development生产模式，打包出来的代码未压缩的。production开发模式（上线），打包出来的代码是压缩的
  model:'development',
  entry: './src/js/entry.js', // 入口文件
  output: {
    // 输出文件
    filename: 'index.js', // 输出文件名
    publicPath: __dirname + '/out', // 添加静态资源, 否则会出现路径错误
    path: __dirname + '/out' // 输出文件路径
  },
  // 引入加载器
  module: {
    rules: [
      {test: /.js$/,use: ['babel-loader']}, // es6等语法解析为js
      {test: /.css$/,use: ['style-loader', 'css-loader']}, // css
      {test: /.(jpg|png|gif|svg)$/,use: ['url-loader?limit=8192&./[name].[ext]']}, // 解析图片
      {test: /.less$/,use: ['style-loader', 'css-loader', 'less-loader']} // 解析less文件

      // 解析CSS并把CSS通过link引入，即单独生成css，而非内联在js里
        //   {test:/.css$/,use:ExtractTextPlugin.extract({fallback:'style-loader',use:'css-loader'})},
        // var ExtractTextPlugin = require("extract-text-webpack-plugin");//将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改
    ]
  },
  // 插件集合
  plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'), providePlugin]，

// 安装webpack-dev-server，
  // 配置devserver
  devServer:{
        contentBase: "./",            //本地服务器的搭建目录，默认为当前目录       
        historyApiFallback:true,      //启动\(^o^)/~404跳转到index.html
        inline:true,                  //实现自动刷新（必须在命令行输入--inline）
        progress:true,                //显示打包进程（必须在命令行输入--hot）
        hot:true,                     //实现热加载         
        port:8080                     //设置端口
       congress：true                  //  支持压缩
  }
}