学习用webpack怎么打包简单项目， webpack-dev-server在服务器环境下运行项目

本文链接：https://blog.youkuaiyun.com/CodePrincess/article/details/124501689

什么是 webpack? 资源加载、打包工具，根据模块的依赖关系静态分析，例如可把多个 js文件打包放入一个js文件里

安装安装webpack

npm install webpack -g
cnpm install -D webpack-cli

安装webpack-cli 失败，
解决方式更新npm ,管理员权限运行以下命令
全局更新
npm install npm -g
或者用淘宝镜像命令
cnpm install npm -g


webpack -v 提示webpack 未安装 执行以下：
npm install -D webpack 


\webpack打包   cnpm i webpack -g  切换到 webpack打包子目录下，webpack -v 提示webpack 未安装

打包时要加./ 命令如 webpack show.js bundle.js


Did you mean './show.js'?
Requests that should resolve in the current directory need to start with './'.


//show.js内容
//将依赖引入show.js，再打包到bundle.js中，最后引用bundle.js
let fun=require('./str.js');  //show.js依赖于str.js里面的文字内容，函数，用require(url)方式引入
require('../css/style.css');//require加载样式
require('jquery');
document.write(fun('<div>今天空气非常好aa</div>'));

webpack 版本过高也会带来问题，可以下载3.8.1版本的

不同的目录可以有不同版本的webpack

PS D:\StudyAndhi\前端优化代码准则\webpack打包\web_test> webpack -v
3.6.0
PS D:\StudyAndhi\前端优化代码准则\webpack打包\web_test> cd ..
PS D:\StudyAndhi\前端优化代码准则\webpack打包> webpack -v
webpack: 5.72.0
webpack-cli: 4.9.2
webpack-dev-server not installed

require语法

str.js
module.exports='今天天气还好'

show.js
直接引用  require("./str.js")

css处理器 css-loader style-loader

webpack3.6.0要安装对应版本的css处理器 css-loader style-loader
npm install --save-dev css-loader@0.28.11
npm install --save-dev style-loader@0.23.1

打包css语法格式

//!  style-loader一定要在cs-loader前面
require('!style-loader!css-loader!./style.css');//require加载样式

配置文件 webpack.config.js

手动编译时，可将经常的操作，添加到配置文件，减少编译过程中，手写代码的数量，构造自动的工具

module.exports={
    entry:'./src/js/show.js',
    output:{
        path:__dirname+'/dist',
        filename:'bundle.js'
    },
    module:{ //模块加载
        loaders:[
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            }
        ]
    }
}

编译命令  webpack

新伙计 webpack-dev-server 服务端环境安装指定端口，启动命令


package.json中修改scripts属性 build:webpack
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  可运行cnpm run build 打包

   cnpm i webpack-dev-server --save-dev

npm run build npm start 实现打包项目，服务端环境下启动项目，可监测build，通过配置 “build”: “webpack --watch”

package.json
"scripts":{
    "start": "webpack-dev-server --entry ./src/js/show.js --output-filename ./dist/bundle.js",
    "build": "webpack --watch"
}

修改端口

webpack.config.js
 devServer:{
        port:8081
    }

心得体会：安装过程中，要注意插件的版本兼容性，当出现插件兼容性问题时，想卸载重新安装，时不时出现卸载失败的情况，我的做法是删除 package.json node_modules 重新安装一遍，虽然有点麻烦额为了之后开发方便，给出一套推荐安装webpack的及其拓展的版本（由于webpack-dev-server只能在项目中安装)

webpack以 npm i webpack@3.8.1 -D 的形式安装到项目下
webpack-cli以 npm i webpack-cli@3.0.0 -D 的形式安装到项目下
webpack-dev-server以 npm i webpack-dev-server@2.9.3 -D 的形式安装到项目下