webpack

最新推荐文章于 2024-07-28 00:56:04 发布

Shirley_0513

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/Shirley_0513/article/details/107945311

版权

一，webpack的基本配置

在项目下 git init ，就会升成package.json，为了时刻记录安装了什么包。

cnpm i webpack webpack-cli --save-dev

此时，package.json 就会生成他们两个。
（别忘了创建 index.js）

webpack --mode development ，这个命令有点长，可以在package.json中改脚本

"script":{
	"start":"webpack --mode development "
}

npm start ，就执行开发环境的模式，编译项目这个命令了。

此时会自动升成 dist，其中的main.js 里面封装的webpack_require 让我们可以用require ,webpack让我们可以用模块化。

“start”: “webpack --mode development --watch”,–watch实时监听

“build”: “webpack --mode production” 编译，压缩文件，生产环境
npm run build 把代码压缩成一行

入口与出口

新建一个 webpack.config.js的文件，配置文件主要写入口文件，出口文件

console.log(__dirname) //绝对路径
module.exports = {
    entry: {
        a: __dirname + '/src/index.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: 'main.js',
        publicPath: '/dist'
    },
    devtool: 'source-map',
    devServer: {
        proxy: {
            '/ajax': {
                target: '',
                changeOrigin: true
            }
        },
        contentBase: './',//哪个目录是根目录？当前文件夹是根目录
        port: '8080', //控制服务器端口号
        inline: true  //实时刷新
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    }
}

安装服务器 webpack-dev-server

cnpm install --save-dev webpack-dev-server

webpack创建了 webpack-dev-server模块，才有8080服务器

反向代理也是 webpack-dev-server 支持的

“start”: “webpack-dev-server”, , 此时 localhost : 8080 下可以找到项目了
用webpack-dev-server，不生成dist文件，想要生成dist下面，在output下增加个属性，publicPath:’/dist’

调试代码
devtool:‘source-map’
本来报错只会显示到dist的main.js的第一行，配置好devtool之后，会映射到源文件中

loaders配置
把浏览器不认识的语言翻译成认识的

css-loader把模块引进来， style-loader把模块插到文档中
安装sass-loader ，一定要依赖于node-sass
cnpm i --save sass-loader node-sass

babel-loader es6转 es5

post-css 处理css兼容性（postcss-loader autoprefixer postcss）